CSS Flex Container

A flex container is a parent element having child elements known as flex items.

In the following diagram, the purple container is a flex container with three flex items in orange boxes.

Flex Container with Three Flex Items

These flex items are arranged and aligned using different flex container properties.

The flexbox layout model needs a flex container before using any flex-based properties. The display property with the flex value sets an element as a flex container.

<!-- A div element (flex container) having 
three paragraphs (flex items)  →
<div>
    <p>First Item</p>
    <p>Second Item</p>
    <p>Third Item</p>
</div>

/* CSS */
div {
    display: flex;
}

Here, display: flex sets the div element as a flex container. All the direct elements within the div element are referred to as flex items.

The distribution and alignment of space within the flex container are adjusted with the help of the following properties.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • gap, row-gap, column-gap

We will look into each of the above flex container properties one by one.


Flex Direction

The flex-direction property specifies the direction of flex items within the flex container.

The possible value of the flex-direction property is row (default value), row-reverse, column, and column-reverse.

Let's look into each of these values.

flex-direction: row

The row value arranges flex items horizontally from left to right. For example,

<!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="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: row (default)</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
flex-direction: row;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Direction

Values of CSS Flex-Direction

flex-direction: row-reverse

The row-reverse value arranges flex items horizontally but in the reverse order. For example,

<!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="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: row-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>
div.container {
    display: flex;
flex-direction: row-reverse;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Direction
flex-direction: column

The column value arranges flex items vertically from top to bottom. For example,

<!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="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: column</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
flex-direction: column;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Direction
flex-direction: column-reverse

The column-reverse value arranges flex items vertically but in reverse order. For example,

<!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="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: column-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </body>

</html>
div.container {
    display: flex;

/* reverses the items in column */ flex-direction: column-reverse;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; /* sets the margin around each flex item */ margin: 4px; }

Browser Output

Example: CSS Flex Direction

Flex Wrap

The flex-wrap value allows flex items to wrap in multiple lines. By default, all the flex items are squeezed in a single horizontal direction (row).

The possible values for the flex-wrap property are nowrap (default value), wrap, and wrap-reverse.

Let's look into each of these values.

flex-wrap: nowrap

The nowrap value of the flex-wrap property keeps flex items squeezed in the direction set by flex-direction. For example,

<!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="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: nowrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>

    </body>
</html>
div.container {
    display: flex;
    flex-direction: row;

/* prevents wrapping of flex items; default value */ flex-wrap: nowrap;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 60px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Wrap

Here, all the flex items are squeezed in the horizontal direction, and their original width is ignored.


Values of CSS Flex-Wrap

flex-wrap: wrap

The wrap value allows flex items to be wrapped in multiple lines when their size is too big for the container. For example,

<!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="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: wrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
    flex-direction: row;

/* wraps the flex items in multiple line */ flex-wrap: wrap;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 60px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Wrap
flex-wrap: wrap-reverse

The wrap-reverse value wraps the flex items but in reverse order. For example,

<!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="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: wrap-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
    </body>
</html>
div.container {
    display: flex;
    flex-direction: row;

/* wraps the flex items in multiple lines */ flex-wrap: wrap-reverse;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 60px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Wrap

Flex Flow

The flex-flow is a shorthand property to specify the flex-direction and flex-wrap property value. For example,

<!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="style.css" />
        <title>CSS flex-flow</title>
    </head>

    <body>
        <h2>flex-flow: row wrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>

    </body>
</html>
div.container {
    display: flex;

/* sets the flex-direction to row and flex-wrap to wrap value */ flex-flow: row wrap;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 60px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Flex Flow

Justify Content

The justify-content property is used to distribute the available space between the flex items along the main axis.

The space is distributed horizontally for flex-direction: row and vertically for flex-direction: column.

The possible values for the justify-content property are flex-start, center, flex-end, space-between, space-around, and space-evenly.

Let's look at each of these values.

justify-content: flex-start

The flex-start value aligns the flex items at the start of the main axis (left for the flex-direction: row/row-reverse and top for the flex-direction: column/column-reverse.)

Let's look at an example.

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: flex-start</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    display: flex;

/* default value */ justify-content: flex-start;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content

Values of CSS Justify-Content

justify-content: center

The center value aligns the flex items in the center of the main axis. For example,

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: center</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
justify-content: center;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content
justify-content: flex-end

The flex-end value aligns the flex items at the end of the main axis (right for the flex-direction: row/row-reverse and bottom for the flex-direction: column/column-reverse.)

Let's look at an example.

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: flex-end</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>
div.container {
    display: flex;
justify-content: flex-end;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content
justify-content: space-between

The space-between value aligns the first item to the starting edge (main-start) and the last item to the ending edge (main-end) within a flex container. The remaining space is evenly divided between the flex items.

Let's look at an example.

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-between</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>
div.container {
    display: flex;
justify-content: space-between;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content
justify-content: space-around

The space-around value evenly divides the space between items. However, there is half of that space before the first and after the last item. For example,

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-around</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
justify-content: space-around;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content
justify-content: space-evenly

The space-evenly value evenly divides the space between the flex items. For example,

<!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="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-evenly</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    display: flex;
justify-content: space-evenly;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Justify Content

Align Items

The align-items property distributes the available space between the flex items along the cross axis.

The space is distributed vertically for flex-direction: row and horizontally for flex-direction: column.

The possible values for the align-items property are flex-start (default value), center, flex-end, baseline, and stretch.

Let's look at each of these values.

align-items: flex-start

The flex-start value aligns the flex items at the start of the cross-axis (top for the flex-direction: row/row-reverse and left for the flex-direction: column/column-reverse).

Let's look at an example.

<!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="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: flex-start</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    height: 160px;
    display: flex;
align-items: flex-start;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Items

Note: It is important to set the height of the flex container while the flex-direction is set to row. Without the height, the flex items will not have any space to be aligned, and no effect will be visible.


Values of CSS Align-Items

align-items: center

The center value aligns the flex items in the center of the cross-axis. For example,

<!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="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: center</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>
div.container {
    height: 160px;
    display: flex;
align-items: center;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Items
align-items: flex-end

The flex-end value aligns the flex items at the end of the cross axis. For example,

<!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="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: flex-end</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>
div.container {
    height: 160px;
    display: flex;
align-items: flex-end;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Item
align-items: baseline

The baseline value aligns the flex items along the baseline of items. This means that the text in all of the flex items will be aligned to the same line.

Let's look at an example.

<!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="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: baseline</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>
    </body>
</html>
div.container {
    height: 160px;
    display: flex;

/* arranges the flex items with respective to baseline of flex items */ align-items: baseline;
border: 2px solid black; background-color: purple; } div.box { width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; } div.box3 { width: 90px; height: 90px; /* sets the line-height */ line-height: 70px; background-color: skyblue; } div.box4 { width: 100px; height: 100px; /* sets the line-height */ line-height: 140px; background-color: greenyellow; }

Browser Output

Example: CSS Align Items

In the above example, the baseline of flex items is first aligned, and then the flex items are aligned on the same baseline.

Note: A baseline is an imaginary horizontal line upon which the base of most characters sits.

align-items: stretch

The stretch value stretches the flex items to fill the container along the cross-axis. For example,

<!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="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: stretch</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>
    </body>
</html>
div.container {
    height: 160px;
    display: flex;

/* stretches the flex items */ align-items: stretch;
border: 2px solid black; background-color: purple; } div.box { width: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Items

In the above example, the flex items are stretched to fill the container vertically.

Note that we haven't set the height of the flex items. If we set the height to flex items, the align-items: stretch doesn't work, and the flex items will maintain the specified height.

If a specific height is set on the flex items, the align-items: stretch property won't have any effect on those items. The items will maintain their specified height, and stretching won't occur.


Align Content

The align-content property controls the alignment of flex lines when there is extra space in the cross-axis.

The possible values of the align-content property are normal (default), flex-start, flex-end, center, space-between, space-around, space-evenly, and stretch.

Let's look into each of these values individually.

align-content: flex-start

The flex-start value aligns the flex lines at the start of the cross-axis (top for the flex-direction: row/row-reverse and left for the flex-direction: column/column-reverse.)

Let's look at an example.

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: flex-start</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
 div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

/* aligns the flex lines to the flex-start */ align-content: flex-start;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content

Note: The align-content property only affects the alignment of flex items in a multi-line flex container. If the flex container is single-line (i.e., if the flex-wrap property is set to no-wrap), then the align-content property will have no effect.


Values of CSS Align-Content

align-content: center

The center value aligns the flex lines in the center of the flex container. For example,

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: center</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

/* aligns the flex lines in the center*/ align-content: center;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content
align-content: flex-end

The flex-end value aligns the flex items at the end of the cross-axis. For example,

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: flex-end</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

/* aligns the flex lines in the end*/ align-content: flex-end;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content
align-content: space-between

The space-between value distributes space evenly between the lines of the flex container. The first line starts at the starting edge, and the last line ends at the ending edge.

Let's look at an example.

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-between</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

/* aligns the flex lines in the end*/ align-content: space-between;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content
align-content: space-around

The space-around value distributes the space evenly between the lines of flex items. However, there is half of that space before the first and after the last flex line.

Let's look at an example.

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-around</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
align-content: space-around;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content
align-content: space-evenly

The space-evenly value distributes space evenly around and between the flex lines. For example,

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-evenly</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>
div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
align-content: space-evenly;
border: 2px solid black; background-color: purple; } div.box { width: 80px; height: 40px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content
align-content: stretch

The stretch value stretches the flex lines to fill the container along the cross-axis. For example,

<!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="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: stretch</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>
div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
align-content: stretch;
border: 2px solid black; background-color: purple; } div.box { width: 80px; text-align: center; border: 1px solid black; background-color: orange; margin: 4px; }

Browser Output

Example: CSS Align Content

In the above example, the flex lines are stretched to fill the container vertically.

Note that we haven't set the height to flex items.

If a specific height is set on the flex items, the align-content: stretch property won't have any effect on those items. The flex lines will maintain their specified flex item height, and stretching won't occur.


Gap Between Flex Items

The row-gap and column-gap properties control the spacing between the flex items within the flex container.

Let's look at each of these individually.

CSS row-gap Property

The row-gap property sets the gap between rows of flex items across the cross-axis. For example,

<!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="style.css" />
        <title>CSS row-gap</title>
    </head>

    <body>
        <h2>row-gap: 20px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>
div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

/* creates a gap of 20px */ row-gap: 20px;
border: 2px solid black; background-color: purple; } div.box { width: 70px; height: 70px; text-align: center; border: 1px solid black; background-color: orange; }

Browser Output

Example: CSS Row Gap Property

CSS column-gap Property

The column-gap property sets the gap between columns of flex items across the main axis. For example,

<!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="style.css" />
        <title>CSS column-gap</title>
    </head>

    <body>
        <h2>column-gap: 20px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>
div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

/* creates a gap of 20px */ column-gap: 20px;
border: 2px solid black; background-color: purple; } div.box { width: 70px; height: 70px; text-align: center; border: 1px solid black; background-color: orange; }

Browser Output

Example: CSS Column Gap Property

CSS gap Property

The gap is the shorthand property that allows setting both row and column gaps between the flex items. For example,

gap: 20px; //creates a gap of 20px between rows and columns
gap: 10px 20px; //creates a row gap of 10px and a column gap of 20px

Let's look at a complete example.

<!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="style.css" />
        <title>CSS gap</title>
    </head>

    <body>
        <h2>gap: 40px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>
div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

/* creates 40px gap between rows and columns */ gap: 40px;
border: 2px solid black; background-color: purple; } div.box { width: 60px; height: 60px; text-align: center; border: 1px solid black; background-color: orange; }

Browser Output

Example: CSS Gap Property

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges