CSS Flexbox

7 min readFeb 5, 2020

In the last articles, we learned about how to position an element using the following methods: (Inline, Block, Table & Positioned). These are fine and they work, but in some ways, they are also rather limiting and frustrating. Now, In this blog, we will discuss flexbox. Flexbox Layout makes it easier to design a flexible responsive layout structure without using float or positioning.

What is Flexbox?

The Flexbox module is a W3C candidate recommendation aims at providing a more efficient way to layout, It gives us the ability to align and distribute space among items in a container, even when their size is unknown or dynamic
With the flexbox we get the power of flexibility in order to fill the available space. So that elements can easily accommodate according to the size of screens.
In a flexbox container, the item expands to fill the free space as well as shrinks to prevent overflow.

How does the flexbox model work?

Flexbox model comes with some sets of properties and values. In that few properties can be applied to parent container and few can be applied only on children's items. So to make use of those flexbox model properties and values we will have to go into the zone of flexbox. So how do we go into that?

Here is the layout without using flex:

To apply flex properties, we start with display: flex property and value. We applied display: flex property to the parent element. Without setting the parent element's style as display: flex, we cannot make use of any property related to the flexbox model.

Below is the simple flexbox model looks like. Once we applied the display flex property to the parent element, it automatically becomes flex container and the children inside it becomes flex-item.

Terminology: (Flex Container and Flex Items)

While working with the flexbox model, there are few basic terminologies that you need to keep in mind. For example flex container and flex-item

1. Flex Container

The first step in using the flexbox is to turn one of our HTML elements into a flex container. We do this with the display property.

Add the following line to .container rule to turn it into a flex container

.container {
  /* ... */
  display: flex;
}

2. Flex Items

The children elements inside the flex container is known as Flex Items.

Understanding the Flex Container properties.

According to the flexbox model, the properties that can be applied to flex containers are:

Display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.

Now we will discuss them one by one:-

A. Display

The display property can take two values:

display: flex || inline-flex;

The display: flex works normally as we have seen earlier.

The display: inline-flex is similar to inline elements, but this is for the inline version of the flex container so that the container takes the space according to the content in it.

B. Flex Direction

The flex-direction property defines in which direction the container wants to stack the flex items. By default when we set the property as display: flex, all the item lay down one by one horizontally. We can change the direction of flex using flex-direction property.

The flex-direction property can accept four values:

flex-direction: row || column || row-reverse || column-reverse;

Row(default)

flex-direction: row;

This is the default value for flex-direction property.

Column

flex-direction: column;

After this value, all the item in the flex-container will lay down top to bottom.

Row-reverse

flex-direction: row-reverse;

The row-reverse is similar to row but this all the item will sit from right to left means in the opposite direction.

Column-reverse

flex-direction: column-reverse;

The column-reverse is also opposite to the column. The item will lay down from bottom to top.

C. Flex Wrap

Flex wrap is the property that determines how the flex-container will accommodate if there are few extra number flex-items inside it.

Let’s take a few more items inside the flex container.

HTML File

CSS File

Below is the output when we add extra items in the container. This is the default behavior of the flexbox container. The flex-container will always accommodate all the new items in a single line, even although the browser needs to be scrolled horizontally. Because right now the items are not being wrapped inside the container.

For wrapping the items inside the flex container we will apply the flex-wrap property to the container(parent class).

The flex-wrap property comes with three different values:

flex-wrap: nowrap || wrap || wrap-reverse;

No wrap(default)

flex-wrap: nowrap;

By default, the container has the nowrap value for flex-wrap property, whether we apply or not. The container will always accommodate all the items inside it in a single line.

Wrap

flex-wrap: wrap;

If the container does not has enough space to accommodate enough items in a single line, then with this value, the items will automatically break into new lines.

Wrap Reverse

flex-wrap: wrap-reverse;

The wrap-reverse property of flex-wrap is similar to wrap value, but this value wraps the items in reverse direction.

D. Flex Flow

Flex flow property is the shorthand property for flex-direction and flex-wrap. The flex-flow property accepts two value at a time, where the first value is for the flex-direction and the last value is for flex-wrap.

flex-flow: row wrap;

D. Justify Content

The justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container.

The justify-content property can take the following 6 different values:

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;

Flex Start(default)

justify-content: flex-start;

Flex End

justify-content: flex-end;

Center

justify-content: center;

Space Between

justify-content: space-between;

Space Around

justify-content: space-around;

Space Evenly

justify-content: space-evenly;

D. Align Items

The align-items property is similar to justify-content property. The only difference is that the align-items property works on "cross-axis". It defines how the "flex-items" will be laid out on the "cross-axis" inside a "flex container".

The align-items property comes with four values:

align-items: stretch || flex-start|| flex-end|| center || baseline;

E. Align Content

The justify-content works on the "main-axis" and align-items works on the "cross-axis". But, the align-content property is somewhat similar to both justify-content and align-items property.

The align-content property accepts 6 different values:

align-content: stretch || flex-start || flex-end || center || space-between || space-around;

Thanks :)