The Flexbox Layout is derived from the word “Flexible” which means to emphasize making the items in the CSS containers flexible enough to adjust or align according to the display devices. Flexbox module is responsible to adjust the spaces between the items in the container by altering their width or height. Flex layout has a big advantage over the regular layout as it can work well for even the most detailed applications in case of layout changes or resizing them. Flex layout follows the flex-flow direction for the alignment, unlike the regular layout which is based on block flow and inline flow directions. Flex layout has two axes one is the main axis, the other one is the cross axis which lies perpendicular to the main.

The Flexible Box Layout Module (Flexbox) is an excellent CSS tool that will make your content in the container responsive. There are majorly two main parts of a flexbox i.e. flex items and flex containers. The flex container can be termed as a parent and the flex item can be termed as children.

Flex properties

Parent properties (flex container): the definition of the container is wrapped inside a body having a keyword .container. Each flex property of the container can be defined inside this body.

.container {

}

Some flex container properties are as follows:-

1. Display: To define the flex container by initializing it with the space allocation we use this property. It can be either an inline or block allocation. We set the display property to flex like below.

.container {
display: flex;
}

2. flex-direction: This is the most important property in the flexbox layout which defines the axis for the item layout. Flex-direction can be used to stack the items either vertically or horizontally. Once the main-axis for the container is defined the flex items can be placed accordingly as per the direction. For stacking the items vertically we use the column option whereas row option is used to stack them horizontally.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

3. flex-wrap- The flexbox layout is by default responsible to fit all the flex-item in a single line but you can explicitly change this property using flex-wrap which defines if the items should be wrapped or not. By default, flexbox has nowrap property which fits all the items in a single line (in this case items may overflow) while the wrap property will allocate the flex items to multiple lines.

Below is the syntax demonstrated:-

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}

4. The flex-flow – This property together defines the flex-direction and flex-wrap properties. Rather than providing separate definitions to these two properties, we can define both of them with flex-flow which will set the main and cross axis.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Example:

.container {
flex-flow: row wrap;
}

5. justify-content- the justify-content property will align the flex items horizontally along the main axis. This property is used to manage the space that is left after the flex-items were allocated space in a container. If in case of the overflow it also helps to manage the alignment of items.

There are several keywords of this property with which flex items can be arranged.

Example:

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

6. align-items- This property aligns the flex items along the cross axis or vertically. As we know the cross axis lies perpendicular to the main axis hence it aligns the flex items perpendicular to the main axis.

Example:

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Children properties (flex item):

Any flex- item placed inside the container becomes the children and is identified by the keyword .item. Below are the flex item properties:-

1. order-The The order property of the flex item will show the order of the item placed. It is not necessary that the first item in the container is treated as first in order. The default order value starts from 0 and by default all order number according to the source order. Order proper can let you alter the default order by defining the order by an integer value

Syntax:

.item {
Order : <integer value>; /* default is 0 */
}

2. flex-grow- This flex-item property defines the expansion of a flex item corresponding to other items. It is just like setting priority for the space allocation to the item. If the flex-grow is set to 1 for all the elements in a container then the leftover space will be equally allocated among the elements of the container. If any element is given order 3 then that number will grow thrice as other elements during the space allocation.

item {
flex-grow: < integer value >; /* default 0 */
}

3. flex-shrink- This property adjusts the flex-item by making them shrink relative to the other items. The value of the item can be assigned and the flex shrink has a value of default value of 1.

This means that in case of the lack of space all items will shrink by a factor 1 or equally. If any element is given the flex-shrink value as 0 that item is exempted from the shrinking.

Syntax:

.item {
flex-shrink: <number>; /* default 1 */
}

4. flex-basis- It initializes the size of the flex-item by giving it a value.

Syntax:

.item {
flex-basis: <length> | auto; /* default auto */
}

5. align-self- This property can override the alignment that was defined by the align-items property for a flex-item.

Syntax:

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

We can make responsive & progressive web apps to give the best UI experience and readability to the user using the flexbox layout. Flex is intelligent enough to understand the content of the application and adjust its alignment.