CSS Flexbox

By /

In this chapter, you will learn about CSS Flexbox, a modern way to arrange elements on a web page. Flexbox makes it easier to place items in rows or columns, control spacing, and align elements. Let’s understand flexbox in css step by step.

What is CSS Flexbox?

Flexbox is a CSS layout system used to arrange elements inside a container. To use Flexbox, you need:

  • A flex container
  • One or more flex items

You can create a flex container using:

.container {
  display: flex;
}

All the direct child elements inside the container become flex items.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Flexbox</title>

  <style>
    .container {
      display: flex;
      background-color: lightblue;
    }

    .box {
      background-color: white;
      border: 2px solid blue;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The three boxes will appear next to each other because their parent uses:

display: flex;

1. Flex Direction

The flex-direction property controls the direction of flex items.

The most commonly used values are:

flex-direction: row;
flex-direction: column;

Row

The row value places items from left to right.

.container {
  display: flex;
  flex-direction: row;
}

This is the default direction in Flexbox.

Column

The column value places items from top to bottom.

.container {
  display: flex;
  flex-direction: column;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Direction</title>

  <style>
    .container {
      display: flex;
      flex-direction: column;
      width: 200px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The boxes will appear one below another.

Reverse Direction

Flexbox also provides reverse directions.

flex-direction: row-reverse;

This places items in the reverse row direction.

flex-direction: column-reverse;

This places items in reverse column order.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Direction Reverse</title>

  <style>
    .container {
      display: flex;
      flex-direction: row-reverse;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The boxes will appear in reverse order.

2. Justify Content

The justify-content property controls how flex items are arranged along the main direction. When flex-direction is row, it mainly controls horizontal alignment. Some commonly used values are:

  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • space-evenly

Center

.container {
  display: flex;
  justify-content: center;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Justify Content</title>

  <style>
    .container {
      display: flex;
      justify-content: center;
      background-color: lightblue;
    }

    .box {
      background-color: white;
      border: 2px solid blue;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The boxes will appear in the center.

Space Between

justify-content: space-between;

This places:

  • The first item at the beginning.
  • The last item at the end.
  • Equal space between the items.

Space Around

justify-content: space-around;

This adds space around each item.

Space Evenly

justify-content: space-evenly;

This creates equal space between all items and around the edges.

3. Align Items

The align-items property controls the alignment of flex items in the opposite direction. For a normal row, this controls vertical alignment. Some commonly used values are:

  • flex-start
  • center
  • flex-end
  • stretch

Example

<!DOCTYPE html>
<html>
<head>
  <title>Align Items</title>

  <style>
    .container {
      display: flex;
      align-items: center;
      height: 200px;
      background-color: lightyellow;
    }

    .box {
      background-color: white;
      border: 2px solid orange;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The boxes will appear vertically centered inside the container.

Align Items: Stretch

The default value of align-items is usually:

align-items: stretch;

This allows flex items to stretch across the available space in the opposite direction. For example, in a row layout, items can stretch vertically if they do not have a fixed height.

4. Centering an Element

One of the most useful features of Flexbox is easy centering. You can center an item both horizontally and vertically using:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Center with Flexbox</title>

  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      background-color: lightblue;
    }

    .box {
      background-color: white;
      border: 2px solid blue;
      padding: 30px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">
      Centered Box
    </div>
  </div>

</body>
</html>

The box will appear in the center of the container.

5. Flex Wrap

By default, Flexbox tries to keep all items on the same line. If there is not enough space, you can use:

flex-wrap: wrap;

This allows items to move to the next line.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Wrap</title>

  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      background-color: lightgreen;
    }

    .box {
      width: 120px;
      background-color: white;
      border: 2px solid green;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

When there is not enough space, some boxes will move to the next line.

You can also use:

flex-wrap: nowrap;

This is the default value and keeps items on the same line.

6. The gap Property

The gap property adds space between flex items. For example:

.container {
  display: flex;
  gap: 20px;
}

This adds 20px of space between the items.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Gap</title>

  <style>
    .container {
      display: flex;
      gap: 20px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

Using gap is often easier than adding margins to every item.

7. Align Self

The align-self property allows you to change the alignment of one specific flex item. For example:

.box {
  align-self: center;
}

This is useful when one item needs to be positioned differently from the other items.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Align Self</title>

  <style>
    .container {
      display: flex;
      align-items: flex-start;
      height: 200px;
      background-color: lightblue;
    }

    .box {
      background-color: white;
      border: 2px solid blue;
      padding: 20px;
      margin: 5px;
    }

    .middle {
      align-self: center;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box middle">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

Only Box 2 will move to the center.

8. Flex Grow

The flex-grow property allows a flex item to grow and use the available space. For example:

.box {
  flex-grow: 1;
}

If all items have flex-grow: 1, they will share the available space equally.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Grow</title>

  <style>
    .container {
      display: flex;
      width: 500px;
      background-color: lightblue;
    }

    .box {
      flex-grow: 1;
      background-color: white;
      border: 2px solid blue;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

All three boxes will share the available space equally. You can also give one item more space.

.box1 {
  flex-grow: 2;
}

.box2 {
  flex-grow: 1;
}

The first box will grow more than the second box.

9. Flex Shrink

The flex-shrink property controls how a flex item shrinks when there is not enough space. For example:

.box {
  flex-shrink: 1;
}

The default value is usually 1, which means the item can shrink if needed.

If you use:

.box {
  flex-shrink: 0;
}

The item will not shrink.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Shrink</title>

  <style>
    .container {
      display: flex;
      width: 400px;
      background-color: lightyellow;
    }

    .box {
      width: 200px;
      background-color: white;
      border: 2px solid orange;
      padding: 20px;
      margin: 5px;
    }

    .box1 {
      flex-shrink: 0;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box">Box 2</div>
  </div>

</body>
</html>

Flexbox will try to manage the available space. The first box is prevented from shrinking.

10. Flex Basis

The flex-basis property sets the starting size of a flex item before the remaining space is distributed.

For example:

.box {
  flex-basis: 200px;
}

This gives the flex item a starting size of 200px.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Basis</title>

  <style>
    .container {
      display: flex;
      background-color: lightgreen;
    }

    .box {
      flex-basis: 200px;
      background-color: white;
      border: 2px solid green;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
  </div>

</body>
</html>

Each box starts with a size of 200px.

11. The flex Shorthand Property

The flex property is a shorthand for:

  • flex-grow
  • flex-shrink
  • flex-basis

For example:

.box {
  flex: 1;
}

This is commonly used to make flex items share the available space.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Shorthand</title>

  <style>
    .container {
      display: flex;
      gap: 10px;
    }

    .box {
      flex: 1;
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

All three boxes will take equal available space. For beginners, flex: 1 is one of the most useful Flexbox values to remember.

12. Order

The order property allows you to change the visual order of flex items. By default, all flex items have:

order: 0;

You can change the order like this:

.box1 {
  order: 2;
}

.box2 {
  order: 1;
}

The item with the smaller order value appears first.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flex Order</title>

  <style>
    .container {
      display: flex;
      gap: 10px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }

    .box1 {
      order: 3;
    }

    .box2 {
      order: 1;
    }

    .box3 {
      order: 2;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>

</body>
</html>

Even though Box 1 appears first in the HTML code, the order property changes how the boxes appear on the page.

A Simple Flexbox Layout

Now, let’s use some Flexbox properties together.

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>

  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .card {
      flex: 1;
      min-width: 200px;
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="card">
      <h2>HTML</h2>
      <p>Learn the structure of web pages.</p>
    </div>

    <div class="card">
      <h2>CSS</h2>
      <p>Learn how to style web pages.</p>
    </div>

    <div class="card">
      <h2>JavaScript</h2>
      <p>Learn how to make web pages interactive.</p>
    </div>

  </div>

</body>
</html>

In this example:

  • display: flex creates a flex container.
  • flex-wrap: wrap allows cards to move to the next line.
  • gap adds space between cards.
  • justify-content: center controls the card alignment.
  • flex: 1 allows cards to grow and share available space.
  • min-width prevents cards from becoming too small.

This is a simple example of how Flexbox can help create flexible layouts.

Quick Recap

  • display: flex creates a flex container.
  • Direct child elements become flex items.
  • flex-direction controls the direction of items.
  • row and column are commonly used directions.
  • row-reverse and column-reverse reverse the item direction.
  • justify-content controls alignment along the main direction.
  • align-items controls alignment in the opposite direction.
  • align-self changes the alignment of one flex item.
  • flex-wrap allows items to move to the next line.
  • gap adds space between flex items.
  • flex-grow allows an item to grow.
  • flex-shrink controls how an item shrinks.
  • flex-basis sets the starting size of a flex item.
  • flex combines grow, shrink, and basis values.
  • order changes the visual order of flex items.

Frequently Asked Questions (FAQs)

Q1. What is CSS Flexbox?

CSS Flexbox is a layout system that helps arrange elements inside a container. It makes it easier to control the direction, alignment, spacing, and size of items.

Q2. How to use Flexbox in CSS?

To use Flexbox in CSS, apply display: flex; to a container. Its direct child elements will then become flex items that can be arranged using Flexbox properties.

Q3. What are the most important CSS Flexbox properties?

Some important CSS Flexbox properties include flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink, and flex-basis.

Q4. Is there a CSS Flexbox tutorial for beginners?

Yes, a CSS Flexbox tutorial for beginners helps you learn how to arrange and align elements using properties such as display: flex, flex-direction, justify-content, and align-items.

Q5. What is a CSS Flexbox layout?

A CSS Flexbox layout uses Flexbox properties to arrange and align elements in rows or columns. It is commonly used for navigation menus, cards, buttons, and responsive layouts.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top