Chapter 15. CSS: Layout – Flex Box

Align-content

Tag:

The align-content property is used for setting a layout pattern of flex items (nested child elements) along the cross axis of a flex container when the flex items are placed in multiple lines. When flex items are placed only in one line, the align-items property is applied.

The cross axis is typically the vertical axis unless you set column or column-reverse in the flex-direction property. We'll provide our explanation based on the default flex-direction setting.

flex-start

This is the default setting. With this property value, flex items are laid out from the top edge of the parent element.

Note: 'edge' means the endpoint with some distance from the edge of the element based on the container's paddings and flex item's margins.

align-content

center

With this property value, flex items are laid out in the center of the parent element.

align-content

flex-end

With this property value, flex items are pushed out to the bottom edge of the parent element.

align-content

stretch

With this property value, flex items are stretched from the top edge to the bottom edge of the parent element.

align-content

space-between

With this property value, the first line items are set on the top edge and the last line items are set on the bottom edge while other lines are evenly distributed between the first line and the last line.

align-content

space-around

With this property value, line items are evenly distributed. Unlike space-between, space-around creates a half-size space on both ends.

align-content

Practice

Objective:
Check how the align-content property works

1. Update the body section in the HTML file

Add the code below in the <body> section of the chapter15.html file. We use the same classes as the ones set before. There is no need to set new classes.

chapter15.html

<h2>align-content</h2>
<h3>Original Position</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: flex-start</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: flex-start;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: center</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: center;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: flex-end</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: flex-end;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: stretch</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: stretch;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: space-between</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: space-between;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: space-around</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: space-around;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>
<hr>

2. Check the result with a browser

Open chapter15.html with a browser.
You can see how the align-content property adjusts the positions of the multi-line flex items.

You can also check the sample result here (Demo Site ).

demo code

flex-start

This is the default setting. With this property value, flex items are laid out from the top edge of the parent element.

Note: 'edge' means the endpoint with some distance from the edge of the element based on the container's paddings and flex item's margins.

align-content

center

With this property value, flex items are laid out in the center of the parent element.

align-content

flex-end

With this property value, flex items are pushed out to the bottom edge of the parent element.

align-content

stretch

With this property value, flex items are stretched from the top edge to the bottom edge of the parent element.

align-content

space-between

align-content

space-around

With this property value, line items are evenly distributed. Unlike space-between, space-around creates a half-size space on both ends.

align-content

Practice

Objective:
Check how the align-content property works

1. Update the body section in the HTML file

Add the code below in the <body> section of the chapter15.html file. We use the same classes as the ones set before. There is no need to set new classes.

chapter15.html

<h2>align-content</h2>
<h3>Original Position</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: flex-start</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: flex-start;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: center</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: center;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: flex-end</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: flex-end;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: stretch</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: stretch;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: space-between</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: space-between;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>

<h3>align-content: space-around</h3>
<div class="flex-container" style="display: flex; height: 200px; width: 300px; flex-wrap: wrap; align-content: space-around;">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
  <div class="flex-item">item 10</div>
  <div class="flex-item">item 11</div>
  <div class="flex-item">item 12</div>
</div>
<hr>