CSS - flex items to be side by side with flex-direction row (parent element)

0 votes
294 views
added Jan 29 in CSS by lcjr First Warrant Officer (11,990 points)
const containerStyles = css`
  display: flex;
  flex-direction: row; /* Change to row */
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
`;

const buttonStyles = css`
  width: 20%;
`;

const inputStyles = css`
  width: 80%;
`;

 

1 Response

0 votes
responded Feb 1 by lcjr First Warrant Officer (11,990 points)

Or, simpler version:

const containerStyle = css`
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
`;

const mainCompStyle = css`
  flex: 70%;
`;

const sideComStyle = css`
  background: #eee;
  flex: 30%; 
`;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...