A beginners guide to CSS flexbox - part one

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.

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;
}

The main properties of flexbox are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• 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

1.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;
    }

2.Row-reverse

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

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

3.Column

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

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

4.Column-reverse

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

  .container{
    display: flex;
    flex-direction: 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.

1.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;
  }

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

1.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;
  }

2.Flex-end

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

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

3.Center

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

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

4.Space-around

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

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

5.Space-evenly

This value will add equal spacing between two items.

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

6.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;
 }

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.

1.Stretch

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

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

2.Flex-start

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

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

3.Flex-end

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

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

4.Center

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

 .container{
    display: flex;
    align-items: 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.

1.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;
 }

2.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;
 }

3.Flex-end

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

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

4.Center

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

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

5.Space-around

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

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

6.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;
    }

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!