Learn
Flexbox
justify-content

In previous exercises, when we changed the display value of parent containers to flex or inline-flex, all of the child elements (flex items) moved toward the upper left corner of the parent container. This is the default behavior of flex containers and their children. We can specify how flex items spread out from left to right, along the main axis. We will learn more about axes in a later exercise.

To position the items from left to right, we use a property called justify-content.

.container { display: flex; justify-content: flex-end; }

In the example above, we set the value of justify-content to flex-end. This will cause all of the flex items to shift to the right side of the flex container.

There are five values for the justify-content property:

  1. flex-start — all items will be positioned in order starting, from the left of the parent container, with no extra space between or before them.
  2. flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
  3. center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
  4. space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
  5. space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.

In the definitions above, “no extra space” means that margins and borders will be respected, but no more space (than is specified in the style rule for the particular element) will be added between elements. The size of each individual flex item is not changed by this property.

Instructions

1.

Assign the div with id #flexstart a justify-content value of flex-start.

2.

Assign the div with id #flexend to have a justify-content value of flex-end.

3.

Assign the div with id #center to have a justify-content value of center.

4.

Assign the div with id #spacearound to have a justify-content value of space-around. Stretch and shrink the browser window to compare and contrast how the elements in each div behave.

5.

Assign the div with id #spacebetween to have a justify-content value of space-between.

Folder Icon

Take this course for free

Already have an account?