CodeWorlds

HTML and CSS course · Module 4: Flexbox

Align Content

6 min read ·
In this lesson11

The "align-content" property in the Flexbox model allows controlling the distribution along the cross axis for multiple rows of elements in a container. It only works when elements occupy more space than is available on the cross axis.

Here are some examples of "align-content" property values:

  • The "flex-start" property - elements are distributed at the start of the container's cross axis.
  • The "flex-end" property - elements are distributed at the end of the container's cross axis.
  • The "center" property - elements are centered along the container's cross axis.
  • The "space-between" property - elements are evenly distributed on the cross axis with equal spacing between them. The first element is at the start of the axis, and the last is at the end.
  • The "space-around" property - elements are evenly distributed on the cross axis with equal spacing between them and on both sides. This means the spacing between elements is larger than the spacing at the container edges.
  • The "space-evenly" property - elements are evenly distributed on the cross axis so that the spacing between them (and from the edges) is equal.

An example of using "align-content" could be a situation where we have a Flexbox container with multiple rows of elements and want to control their distribution along the cross axis. We can choose the appropriate "align-content" value to achieve the desired layout that is aesthetic and functional for the given web page.

Exercise: Aligning Elements with align-content

In this exercise, you will learn how to use the align-content property in the Flexbox model to precisely control the distribution of elements along the cross axis for multiple rows of elements in a container. Your task will be to create a web page with containers that are arranged in different layouts using this property.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure. Add a <section> element with several <div> elements in the document body (<body>).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>Aligning Elements with align-content</title>
</head>
<body>
  <section class="container flex-start">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container flex-end">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container center">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-around">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-evenly">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
</body>
</html>

Step 2: Create a CSS File

Open or create a new CSS file and save it as styles.css.

Step 3: Basic Styling

Add basic styles for the <section> and <div> elements so they are visible on the page.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: 200px;
  margin: 10px 0;
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

Step 4: Layout with align-content: flex-start

Add a style for the .flex-start class to position elements at the start of the cross axis.

/* Layout with align-content: flex-start */
.flex-start {
  align-content: flex-start;
}

Step 5: Layout with align-content: flex-end

Add a style for the .flex-end class to position elements at the end of the cross axis.

/* Layout with align-content: flex-end */
.flex-end {
  align-content: flex-end;
}

Step 6: Layout with align-content: center

Add a style for the .center class to center elements along the cross axis.

/* Layout with align-content: center */
.center {
  align-content: center;
}

Step 7: Layout with align-content: space-between

Add a style for the .space-between class to evenly distribute elements on the cross axis with equal spacing between them.

/* Layout with align-content: space-between */
.space-between {
  align-content: space-between;
}

Step 8: Layout with align-content: space-around

Add a style for the .space-around class to evenly distribute elements on the cross axis with equal spacing around them.

/* Layout with align-content: space-around */
.space-around {
  align-content: space-around;
}

Step 9: Layout with align-content: space-evenly

Add a style for the .space-evenly class to evenly distribute elements on the cross axis with equal spacing between them and the container edges.

/* Layout with align-content: space-evenly */
.space-evenly {
  align-content: space-evenly;
}

Result

After completing all the steps, your HTML and CSS files should look as follows:

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>Aligning Elements with align-content</title>
</head>
<body>
  <section class="container flex-start">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container flex-end">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container center">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-around">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-evenly">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
</body>
</html>

CSS File (styles.css)

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: 200px;
  margin: 10px 0;
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

/* Layout with align-content: flex-start */
.flex-start {
  align-content: flex-start;
}

/* Layout with align-content: flex-end */
.flex-end {
  align-content: flex-end;
}

/* Layout with align-content: center */
.center {
  align-content: center;
}

/* Layout with align-content: space-between */
.space-between {
  align-content: space-between;
}

/* Layout with align-content: space-around */
.space-around {
  align-content: space-around;
}

/* Layout with align-content: space-evenly */
.space-evenly {
  align-content: space-evenly;
}

Additional Task

  1. Add more sections with different align-content values to better understand how the different options work.
  2. Try adding more styles to your page, such as changing colors, sizes, and other element properties to better understand how the different options work.
  3. Test your skills by creating more complex layouts using different combinations of Flexbox properties.

After completing this exercise, you should better understand how to use the align-content property in the Flexbox model to precisely control the distribution of elements along the cross axis.

Code for this lesson: index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Flex Direction</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flex Direction - Layout Direction</h1>
        <p class="subtitle">Define the main axis of a flex container</p>

        <section class="demo-section">
            <h2>flex-direction: row (default)</h2>
            <div class="flex-container dir-row">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elements arranged in a row from left to right (→)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: row-reverse</h2>
            <div class="flex-container dir-row-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elements arranged in a row from right to left (←)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: column</h2>
            <div class="flex-container dir-column">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elements arranged in a column from top to bottom (↓)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: column-reverse</h2>
            <div class="flex-container dir-column-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elements arranged in a column from bottom to top (↑)</p>
        </section>

        <section class="demo-section practice">
            <h2>Practice: Egyptian hierarchy</h2>
            <p class="practice-description">Let's arrange the Egyptian hierarchy using flex-direction!</p>

            <div class="hierarchy-container">
                <div class="hierarchy-box">
                    <h3>Horizontal hierarchy (row)</h3>
                    <div class="hierarchy row-hierarchy">
                        <div class="rank">Pharaoh</div>
                        <div class="rank">Vizier</div>
                        <div class="rank">Scribe</div>
                        <div class="rank">Peasant</div>
                    </div>
                </div>

                <div class="hierarchy-box">
                    <h3>Vertical hierarchy (column)</h3>
                    <div class="hierarchy column-hierarchy">
                        <div class="rank">Pharaoh</div>
                        <div class="rank">Vizier</div>
                        <div class="rank">Scribe</div>
                        <div class="rank">Peasant</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

Docs entries used in this lesson

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

  1. 1. When does the align-content property take effect?

Hands-on tasks in the game

  • Vertical ordering

    Arrange the steps needed for align-content to work in a Flexbox container:

Useful articles

We use cookies to enhance your experience on the site
Privacy Policy
OK