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).

CSS FlexBox Row and Column Example

How to make row using CSS flexbox?

create 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.

<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?

create column using CSS flexbox

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

<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

Add gaps between flex items

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

<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

reverse the CSS flex items

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.
<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?

CSS flex overflow

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

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

CSS flexbox row wrap
<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

  1. Flex Container Properties – for the Parent. E.g.display, gap, justify-content, etc.
  2. Flex Items Properties – for the Children. E.g.order, flex-grow, align-self, etc.
Types of CSS flexbox properties

Flexbox Tutorial Resources

Here are some resources to learn and understand CSS flexbox –

πŸŽ₯ Flexbox Videos of Kevin Powell

πŸ”— Flexbox Guides