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

Align Content

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>
).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Aligning Elements with align-content</title>
8</head>
9<body>
10  <section class="container flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16  </section>
17  <section class="container flex-end">
18    <div>Element 1</div>
19    <div>Element 2</div>
20    <div>Element 3</div>
21    <div>Element 4</div>
22    <div>Element 5</div>
23  </section>
24  <section class="container center">
25    <div>Element 1</div>
26    <div>Element 2</div>
27    <div>Element 3</div>
28    <div>Element 4</div>
29    <div>Element 5</div>
30  </section>
31  <section class="container space-between">
32    <div>Element 1</div>
33    <div>Element 2</div>
34    <div>Element 3</div>
35    <div>Element 4</div>
36    <div>Element 5</div>
37  </section>
38  <section class="container space-around">
39    <div>Element 1</div>
40    <div>Element 2</div>
41    <div>Element 3</div>
42    <div>Element 4</div>
43    <div>Element 5</div>
44  </section>
45  <section class="container space-evenly">
46    <div>Element 1</div>
47    <div>Element 2</div>
48    <div>Element 3</div>
49    <div>Element 4</div>
50    <div>Element 5</div>
51  </section>
52</body>
53</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.

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  flex-wrap: wrap;
13  border: 1px solid #000;
14  padding: 10px;
15  width: 80%;
16  height: 200px;
17  margin: 10px 0;
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}

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.

1/* Layout with align-content: flex-start */
2.flex-start {
3  align-content: flex-start;
4}

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.

1/* Layout with align-content: flex-end */
2.flex-end {
3  align-content: flex-end;
4}

Step 6: Layout with 
align-content: center

Add a style for the 

.center
class to center elements along the cross axis.

1/* Layout with align-content: center */
2.center {
3  align-content: center;
4}

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.

1/* Layout with align-content: space-between */
2.space-between {
3  align-content: space-between;
4}

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.

1/* Layout with align-content: space-around */
2.space-around {
3  align-content: space-around;
4}

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.

1/* Layout with align-content: space-evenly */
2.space-evenly {
3  align-content: space-evenly;
4}

Result

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

HTML File (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Aligning Elements with align-content</title>
8</head>
9<body>
10  <section class="container flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16  </section>
17  <section class="container flex-end">
18    <div>Element 1</div>
19    <div>Element 2</div>
20    <div>Element 3</div>
21    <div>Element 4</div>
22    <div>Element 5</div>
23  </section>
24  <section class="container center">
25    <div>Element 1</div>
26    <div>Element 2</div>
27    <div>Element 3</div>
28    <div>Element 4</div>
29    <div>Element 5</div>
30  </section>
31  <section class="container space-between">
32    <div>Element 1</div>
33    <div>Element 2</div>
34    <div>Element 3</div>
35    <div>Element 4</div>
36    <div>Element 5</div>
37  </section>
38  <section class="container space-around">
39    <div>Element 1</div>
40    <div>Element 2</div>
41    <div>Element 3</div>
42    <div>Element 4</div>
43    <div>Element 5</div>
44  </section>
45  <section class="container space-evenly">
46    <div>Element 1</div>
47    <div>Element 2</div>
48    <div>Element 3</div>
49    <div>Element 4</div>
50    <div>Element 5</div>
51  </section>
52</body>
53</html>

CSS File (styles.css)

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  flex-wrap: wrap;
13  border: 1px solid #000;
14  padding: 10px;
15  width: 80%;
16  height: 200px;
17  margin: 10px 0;
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}
27
28/* Layout with align-content: flex-start */
29.flex-start {
30  align-content: flex-start;
31}
32
33/* Layout with align-content: flex-end */
34.flex-end {
35  align-content: flex-end;
36}
37
38/* Layout with align-content: center */
39.center {
40  align-content: center;
41}
42
43/* Layout with align-content: space-between */
44.space-between {
45  align-content: space-between;
46}
47
48/* Layout with align-content: space-around */
49.space-around {
50  align-content: space-around;
51}
52
53/* Layout with align-content: space-evenly */
54.space-evenly {
55  align-content: space-evenly;
56}

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.

Go to CodeWorlds→