← Blog

Beginners guide to css flexbox - part one

October 7, 2020

CSS flexible layout module or flexbox for short is a web layout model that helps in designing a flexible layout. It allows items inside a container to be aligned automatically according to the screen size.

In this article, I'll be giving you the main properties of flexbox and showing you how they work. The first part will be about properties that affect the flex container and the second part about properties that affect the flex items.

When using flexbox, items will be displayed following two axes, the main axis, and the cross axis.

The main axis as the name implies is the main axis where items will be displayed. By default, the main axis is horizontal.

The cross axis is perpendicular to the main axis and its direction depends on the direction of the main axis. By default, the cross axis is vertical.

Diagram of flexbox container with flex items and lines showing the main and cross axis

To start using flexbox you have to first declare a container and inside it, we'll add a few divs that'll we'll use as an example.

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

To make the container flexible, you have to set the container display to flex. We'll also add some styling to the items inside the container.

.container {
  display: flex;
}

.item {
  background-color: #f5f;
  border: 2px solid #0000;
  padding: 2rem;
  font-size: 2rem;
}

container display set to flex

The main properties of flexbox are:

  1. flex-direction

  2. flex-wrap

  3. flex-flow

  4. justify-content

  5. align-items

  6. align-content


Flex-direction

The flex-direction property indicates the direction in which the items inside the flexbox container will be laid out in.

It has four value:

  • row
  • row-reverse
  • column
  • column-reverse
  • Row

The row value is the default value and it will align the items horizontally from left to right.

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

flex direction set to row

  • Row-reverse

    The row-reverse value will align the items horizontally from right to left.

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

    Flex direction is set to row reverse

  • Column

    The column value will align the items vertically from top to bottom.

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

    Flex direction is set to column reverse

  • Column-reverse

The column-reverse value will align items vertically from bottom to top.

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

Flex direction is set to column reverse

Flex-wrap

In case you have a lot of items and they all appear on the same line overflowing of the container, you'll use the flex-wrap property to specify whether a container should wrap or not.

  • Wrap

The wrap value specifies that the items should be broken down into multiple rows so as to prevent any overflow. Any element that would cause an overflow will then be fitted into a new line.

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

Flex wrap is set to wrap

  • Nowrap

This is the default value and if used will leave the items as is in a single line.

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

Flex wrap is set to no wrap

Flex-flow

The flex-flow property is a shorthand property for flex-direction and flex-wrap.

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

Instead of writing the above, the code will be the following

.container {
  display: flex;
  flex-flow: row wrap;
}

justify content

This property is used to align the items of the flex container along the direction that was previously specified using flex-direction.

  • Flex-start

    This is the default value and will align the items at the beginning of the container.

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

    Justify content is set to flex start

    • Flex-end

      This value will align the items at the end of the container.

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

      Justify content is set to flex end

    • Center

This value will align the items at the center of the container.

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

Justify content is set to center

-Space-around

This value will distribute the items evenly in the line with spaces around the items.

.container {
  display: flex;
  justify-content: space-around;
}

Justify content is set to space around

  • Space-evenly

This value will add equal spacing between two items.

.container {
  display: flex;
  justify-content: space-evenly;
}

Justify content is set to space evenly

  • Space-between

This value will display the items evenly along the line. The first element will be at the start and the last element will be at the end of the line.

.container {
  display: flex;
  justify-content: space-between;
}

Jusitfy content is set to  space between

align items

This property is used to align the flex items along the cross axis which is perpendicular to the main axis.

To better demonstrate this property, I set the container height to 200px and background color to black.

  • Stretch

This is the default value and will stretch the items to fill the container.

.container {
  display: flex;
  align-items: stretch;
}

Align items is set to stretch

  • Flex-start

This value will align the items at the top of the container.

.container {
  display: flex;
  align-items: flex-start;
}

Align items is set to flex start

  • Flex-end

This value will align the items at the bottom of the container.

.container {
  display: flex;
  align-items: flex-end;
}

Align items is set to flex end

  • Center

This value will align the items at the center of the container.

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

Align items is set to center

align content

This property is used to align the flex lines. This only applies if you have set your container to wrap flex-wrap: wrap and if you have more than one row of flex items.

To better demonstrate this property, I have set the height to 500px and flex-wrap property to wrap.

  • Stretch

This is the default value. It will stretch the existing lines to take up the remaining space.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Align content is set to stretch

  • Flex-start

This value will display the flex lines at the start of the container.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

Align content is set to flex start

  • Flex-end

This value will display the lines at the bottom of the container.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Align content is set to flex end

  • Center

This value will display the lines at the center of the container.

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

Align content is set to center

  • Space-around

This value will distribute the lines evenly with space around the lines.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

Align content set to space around

  • Space-between

This value will distribute the lines equally in the container. The first line is at the start of the container while the last one is at the end.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Align content is set to space between

This is the first part of a two-post series that I plan to write about CSS flexbox. If you have anything to add or any questions do so in the comments.

Thanks for reading!