CSS FlexBox Guide for Beginners

What is the CSS Flexbox?

The CSS Flexbox (Flexible Box) is a layout module used to place a group of items or elements in one dimension (either as a row or as a column).

Make Row using flexbox.
Make Column using flexbox.
Add gaps between the flex items.
Reverse the items of a row or column.
Handle flex overflow.
Flex properties.
FlexBox Tutorial Resources.

How to make row using CSS flexbox?

The CSS display:flex; is used to apply the flexbox to an HTML element. After that, set the flex-direction to row, you can skip it as the default value of flex-direction is row.

▷ Test the code

<style>
  .row{
    font-size: 2rem;
    width: 400px;
    background-color: #f5e5c1;
    padding: 10px;

    /* Flexbox */
    display: flex;
    flex-direction: row;
  }
  .row .item{
    border: 3px solid #222;
  }
</style>

<div class="row">
  <div class="item">🍉</div>
  <div class="item">🍊</div>
  <div class="item">🍋</div>
  <div class="item">🍌</div>
  <div class="item">🍍</div>
</div>

How to make column using CSS flexbox?

Flexbox makes creating columns as simple as creating rows. Just set the flex-direction to column after applying the flexbox.

▷ Test the code

<style>
  .column{
    font-size: 2rem;
    width: 400px;
    background-color: #f5e5c1;
    padding: 10px;

    /* Flexbox */
    display: flex;
    flex-direction: column;
  }
  .column .item{
    border: 3px solid #222;
  }
</style>

<div class="column">
  <div class="item">🍉</div>
  <div class="item">🍊</div>
  <div class="item">🍋</div>
  <div class="item">🍌</div>
  <div class="item">🍍</div>
</div>

Add gaps between the items of a row or column

The gap: property is used to add gaps between the items of a row or column.

▷ Test the code

<style>
  .row{
    font-size: 2rem;
    width: 400px;
    background-color: #f5e5c1;
    padding: 10px;

    /* Flexbox */
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .row .item{
    border: 3px solid #222;
  }
</style>

<div class="row">
  <div class="item">🍉</div>
  <div class="item">🍊</div>
  <div class="item">🍋</div>
  <div class="item">🍌</div>
  <div class="item">🍍</div>
</div>

Reverse the items of a row or column

The flex-direction: property can also reverse a column or row. It has two values for reversing flex items –

row-reverse – to reverse the items of a row.
column-reverse – to reverse the items of a column.

▷ Test the code

<style>
  .row{
    font-size: 2rem;
    width: 400px;
    background-color: #f5e5c1;
    padding: 10px;

    /* Flexbox */
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
  }
  .row .item{
    border: 3px solid #222;
  }
</style>

<div class="row">
  <div class="item">1 🍉</div>
  <div class="item">2 🍊</div>
  <div class="item">3 🍋</div>
  <div class="item">4 🍌</div>
  <div class="item">5 🍍</div>
</div>

How to handle Items overflow of a column or row?

The flex-wrap: property is used to handle flex overflow.

The flex-wrap: wrap; will wrap up the flex items in the flex container. By default, its value is nowrap that’s why it is overflowing.

▷ Test the code

<style>
  .row{
    font-size: 2rem;
    width: 200px;
    background-color: #f5e5c1;
    padding: 10px;

    /* Flexbox */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .row .item{
    border: 3px solid #222;
  }
</style>

<div class="row">
  <div class="item">🍉</div>
  <div class="item">🍊</div>
  <div class="item">🍋</div>
  <div class="item">🍌</div>
  <div class="item">🍍</div>
</div>

Flex Properties

There are a lot of flex properties that provide more control over the layout. We can separate these properties into two parts –

Flex Container Properties – for the Parent. E.g. – display, gap, justify-content, etc.
Flex Items Properties – for the Children. E.g. – order, flex-grow, align-self, etc.