CSS Flexbox #9. The align-content Property

In the third tutorial of this series, you learned that the align-items flexbox property specifies how flex-items are distributed along the cross axis of the flex-container. The align-content property specifies how the lines inside the container will be distributed, once you have applied the flex-wrap property.

The align-content property accepts 6 possible values:

• stretch (default)
• center
• flex-start
• flex-end
• space-between
• space-around

Let’s demonstrate this with an example!

Step #1. – Create the HTML

• Open your preferred code editor.
• Create an empty HTML file.
• Visit this page, copy the HTML code and save the file.

Step #2. – Create the CSS

Let’s add some basic styling.

• Create a file called style.css (the file is already linked in the tag of the HTML code).
• Copy and paste this code:

/* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Step #3. – The Flexbox Styles

• Edit the CSS code, in order to declare the flex-container:

.container { display: flex; background-color: #f5ca3c; }

Each one of the items inside the container is a flex-item now. In order to generate multiple lines, it is necessary to wrap the items with the help of the flex-wrap property at the container level. Furthermore, you have to change the width of the flex-items based on the value of the flex-basis property.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; } .item { flex-basis: 50%; }

The height of the flex-container is determined by the total height of the items inside them. In order to demonstrate the align-content property, it is necessary to assign the main container a fixed height value.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; }

The flex-container is now as high as the viewport screen.

• Edit the CSS code with the purpose of testing the different values for the align-content property:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: center; }

Remember that align-content refers to the wrapped lines and not to the items. In this case, the three lines of the layout have been placed at the center of the flex-container.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: flex-start; }

With the default value for the flex-direction property (row), the value flex-start for the align-content property will place the wrapped lines at the top of the flex-container. In the same manner, align-content: flex-end will place the wrapped lines at the bottom of the container.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: flex-end; }

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: space-around; }

The space-around value tells the lines to take the available space in the container and divide it around them, whereas the space-between value places the first line at the top and the last line at the bottom of the container and then divides the available space between the lines.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: space-between; }

On the Block Axis

Changing the value of the flex-direction property to column will distribute the items along the block axis in columns and not in rows. That means that the lines will turn into columns. The logic remains the same.

• Edit the CSS code:

.container { display: flex; flex-direction: column; background-color: #f5ca3c; flex-wrap: wrap; height: 100vh; align-content: space-between; }

Thank you very much for reading and stay tuned for more Flexbox content.

Previous tutorials of this series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #3. The align-items Property
• CSS Flexbox #4. The flex-grow Property
• CSS Flexbox #5. The flex-shrink Property
• CSS Flexbox #6. The flex-basis Property
• CSS Flexbox #7. The order Property
• CSS Flexbox #8. The flex-wrap Property