Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.

Using Flexbox, how do you distribute items equally inside a container?

Experience Level: Junior
Tags: CSSFlexbox

Answer

To distribute items equally on a line, set styles to justify-content: space-around or justify-content: space-between on the flex container.

To distribute items equally in the column, set styles justify-content: space-around or justify-content: space-between on the flex container. This would however display the items on a line. To display them in a column, you need to change the flex item flow direction to column. In order to do that, set styles flex-direction: column on the flex container.

CSS - Horizontal direction

div {
  display: flex;
  justify-content: space-around;
}

CSS - Vertical direction

div {
  display: flex;
  justify-direction: column;
  justify-content: spacing-around;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself