Learn

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.

Below are five commonly used values for the justify-content property:

  • 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.
  • 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.
  • center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
  • space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
  • 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> element with the id flexstart a justify-content property with a value of flex-start.

You won’t see any changes since flex-start is the default value;

2.

Assign the <div> element with the id flexend a justify-content property with a value of flex-end.

3.

Assign the <div> element with the id center a justify-content property with a value of center.

4.

Assign the <div> element with the id spacearound a justify-content property with a 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> element with the id spacebetween a justify-content property with a value of space-between.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?