CSS Flexbox - align-content

Previous
Quiz
Next

CSS align-content property used to control distributed between and around content items along the cross-axis of a flexbox or the block axis of a grid.

Possible Values

  • start − The flex items are closely packed against the starting edge of the alignment container in the cross axis.

  • end − The flex items are closely packed against the ending edge of the alignment container in the cross axis.

  • center − The flex items are closely packed at the center of the alignment container in the cross axis.

  • flex-start − The flex items are closely packed against the edge of the alignment container, determined by the cross-start side of the flex container. This only applies to flex layout items and behaves as a start for items that are not children of a flex container.

  • flex-end − The flex items are closely packed against the edge of the alignment container, determined by the cross-end side of the flex container. This only applies to flex layout items and behaves as a end for items that are not children of a flex container.

  • normal − The default position of items is maintained when no align-content value is set.

  • space-between − It evenly distributes space between the flex items along the cross axis of a flex container. Each pair of adjacent elements has the same spacing. The first and last items are flush with the start edge and end edge of the alignment container in the cross axis.

  • space-around − It evenly distributes space around the flex items along the cross axis of a flex container. Each pair of adjacent elements has the same spacing. The spacing before the first and after the last item is equal to half the space between each pair of adjacent items.

  • space-evenly − It evenly distributes the space around and between the flex items along the cross axis. The adjacent items have the same spacing, the start edge, and the first item, as well as the end edge and the last item.

  • basline − Aligns flex items along their baselines of the flex container.

  • stretch − If the total size of items along the cross axis is smaller than the alignment container, auto-sized items increase their size equally to fill the container, respecting max-height/max-width constraints.

Applies to

Multi-line flex containers.

Syntax

Positional Alignment

align-content: center; 
align-content: start; 
align-content: end; 
align-content: flex-start; 
align-content: flex-end

Normal Alignment

align-content: normal;

Baseline Alignment

align-content: baseline;
align-content: first baseline;
align-content: last baseline;

Distributed Alignment

align-content: space-between; 
align-content: space-around; 
align-content: space-evenly; 
align-content: stretch;

CSS align-content- start

The following example demonstrates that the align-content: start property aligns the flex items at the start of the cross axis of a flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: start;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content- end

The following example demonstrates that the align-content: end property aligns the flex items at the end of the cross axis of a flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: end;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - center

The following example demonstrates that the align-content: center property aligns the flex items at the center of the cross axis of a flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: center;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - flex-start

The following example demonstrates that the align-content: flex-start property aligns the flex items at the start of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: flex-start;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - flex-end

The following example demonstrates that the align-content: flex-end property aligns the flex items at the end of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: flex-end;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - space-between

The following example demonstrates that the align-content: space-between property evenly distribute space between the flex items along the cross axis of a flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: space-between;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - space-around

The following example demonstrates that align-content: space-around property distributes the flex items within a flex container with equal space around each item −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: space-around;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - space-evenly

The following example demonstrates that align-content: space-evenly evenly distributes the space around and between the flex items along the cross axis of a flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 300px;
      width: 100%;
      flex-wrap: wrap;
      align-content: space-evenly;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
   </div>
</body>
</html>

CSS align-content - baseline

The following example demonstrates that the align-content: baseline property aligns flex items along their baselines of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      width: 100%;
      flex-wrap: wrap;
      align-content: baseline;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS align-content - stretch

The following example demonstartes that align-content: stretch property stretch the flex items along the cross-axis of the flex container to fill the available space −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 200px;
      width: 100%;
      flex-wrap: wrap;
      align-content: stretch;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>
Print Page
Previous
Next
Advertisements