CSS Flexbox Properties Guide Part 1

In this post we will see different CSS Flexbox properties of , their uses and how you can make your UI more flexible.

CSS Flexbox / Flexbox layout module is a useful module which helps in layout , alignment of elements in a container. The basic idea is to give the container (Flex container) the ability to alter the items (flex items) height & width accordingly.

These are the different properties of Flexbox we will be discussing in this tutorial.

In order to make your container a flex container you need to add the property
display: flex;

.container {
display: flex;
}

flex-direction: flex-direction property is used to align the children of the flex container in four different ways row, column, row-reverse, column-reverse. we will see how each of them aligns the flex items in the container. You define it by using the property flex-direction like below.

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

The above gif shows how flex-direction row and column effects the flex items inside the flex container.

Below is the demonstration of remaining flex-direction properties reverse and column-reverse, either of them would just reverse the order of the flex-items in the flex-container. The below gif show how the order 1-5 is reversed to 5-1 when used flex-direction: row-reverse.