Learn

Now that elements can wrap to the next line, we might have multiple rows of flex items within the same container. In a previous exercise, we used the align-items property to space flex items from the top to the bottom of a flex container. align-items is for aligning elements within a single row. If a flex container has multiple rows of content, we can use align-content to space the rows from top to bottom.

Below are some of the more commonly used align-content values:

  • flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between.
  • flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between.
  • center — all rows of elements will be positioned at the center of the parent element with no extra space between.
  • space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
  • space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
  • stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).
<div class='container'> <div class='child'> <h1>1</h1> </div> <div class='child'> <h1>2</h1> </div> <div class='child'> <h1>3</h1> </div> <div class='child'> <h1>4</h1> </div> </div>
.container { display: flex; width: 400px; height: 400px; flex-wrap: wrap; align-content: space-around; } .child { width: 150px; height: 150px; }

In the example above, there are four flex items inside of a flex container. The flex items are set to be 150 pixels wide each, but the parent container is only 400 pixels wide. This means that no more than two elements can be displayed inline. The other two elements will wrap to the next line and there will be two rows of divs inside of the flex container. The align-content property is set to the value of space-around, which means the two rows of divs will be evenly spaced from top to bottom of the parent container with equal space before the first row and after the second, with double space between the rows.

Below, we will see each of the properties in action!

Note: The align-content property is declared on flex containers.

Instructions

1.

In style.css, inside the #flexstart ruleset, add an align-content property with a value of flex-start to position the rows of elements at the top of the parent container.

2.

In style.css, inside the #flexend ruleset, add an align-content property with a value of flex-end to position the rows of elements at the bottom of the parent container.

3.

In style.css, inside the #center ruleset, add an align-content property with a value of center to position the rows of elements at the center of the parent container.

4.

In style.css, inside the #between ruleset, add an align-content property with a value of space-between to space out all of the rows of elements evenly with equal space between each row.

5.

In style.css, inside the #around ruleset, add an align-content property with a value of space-around to space out all of the rows of elements evenly with equal space around each row.

6.

Inside the .left, .center, .right ruleset, change the height property to min-height. What happens to the flex items in the #stretch container?

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?