CSS tutorial series: CSS Flexbox (working with flex container)

In this previous post CSS tutorial series: Box Model, we've come across the display property and learned three property values "inline, block and, inline-block". To day we're going to learn a new value of the display property which is "flex".
Before we begin, let's explain what is the Flexbox.

What is Flexbox?

Flexbox, also known as Flexible Box, is a layout model made for one-dimensional content that simplifies the creation of flexible and responsive layout structures.

Understanding the idea of a main axis and a cross axis is essential to understanding flexbox.

• The axis determined by your flex-direction property is the main axis, if the value of that property is row then your main axis is along the row, if the value is column then your main axis is along the column.
  

• The cross axis runs in the other direction to the main axis, meaning if the value of flex-direction is row then your cross axis runs along the column and vise versa.

before you can use Flexbox, you need to create a flex container. A flex container is, a container that contains elements within it which we call flex items

<div class="flex-container">
  Flex Container
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

div {
  font-size: 1.5rem;
}

.flex-container {
  background-color: black;
  color: red;
  padding-bottom: 10px;
}

.flex-item {
  background-color: yellow;
  margin: 10px 0;
}

The flex container becomes flexible when the display property is set to flex.

.flex-container {
  background-color: black;
  color: red;
  display: flex;
}

The flex container has a number of flex properties, which will be explained using examples.

Flex direction property

this property indicates the direction that the container wants to stack the flex items.

.flex-container {
  display: flex;
}

By default the flex direction is row so the flex items will be displayed from left to right.

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

If we set the flex-direction to row-reverse the flex items will bee displayed from right to left.

If we set the flex-direction to column the flex items will be stacked vertically.

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

If we set the flex-direction to column-reverse the flex items will be stacked vertically.

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

Flex wrap property

This property indicates if the flex items should wrap or not. Its default value is nowarp, which forces the flex items not to wrap onto a new line.

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

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Flex flow property

This property is a shorthand for both previously mentioned properties flex-direction and flex-wrap

Suppose, for instance, that we want our flex container to wrap our row onto a new line.

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

Justify content property

This property aligns the flex items horizontally in the flex container.

Demonstration of flex-start, center, flex-end:

Demonstration of space-around, space-between, space-evenly:

Align items property

This property aligns the items vertically in the container.

Demonstration of flex-start, center and flex-end:

• align-items: stretch is the default.
• align-items: baseline using this value will align the flex items according to their baseline.

How to center a div

Which properties can we use to center a div based on what we just learned?

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

Tip

You can center a block level element horizontally such as a div using margin: 0 auto.