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

What does justify-content CSS property do and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The CSS property justify-content defines how the flex items within a flex container will be justified.

The justification is always done on the main axis. So for the horizontal orientation of a flex container the flex-start will justify items to left, flex-end will justify items to right.

  • flex-start - justifies the content to left for horizontal orientation or to top for vertical orientation
  • flex-end - justifies the content to right for horizontal orientation or to bottom for vertical orientation
  • center - justifies the content to center
  • space-between - when there are multiple flex items in a flex container, they will be justified evenly, however, the first and last item won't have space on their outer edges
  • space-around - when there are multiple flex items in a flex container, they will be justified evenly.

CSS


div {
  display: flex;
  justify-content: flex-start;
}

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