Flex in CSS

Flex using display

It defines flex container. It displays all its children in flex format. Flex properties are accessible to all its children. It can be defined below.

.container{
display:flex;
}

Here, the container is a parent class. Flex property applies to all children elements of the container. Other attributes of flex are derived below.

Flex-direction:

Flex-direction attributes are used to set direction flex items. There are four different values of flex-direction. Every value and its usage are below.

flex-direction: row;

The row is the default value of flex-direction. If the developer does not apply any value, flex items display in row format. The example is given below.

As shown in the example, flex is applied to all four boxes and by applying flex-direction as a row, boxes display in horizontal format from left to right.

Flex-direction: column;

The column value display flex items in column format from top to bottom. The example is below.

As shown in the example, flex is applied to all four boxes and by applying flex-direction as a column, boxes display in vertical format.

flex-direction: row-reverse;

The row-reverse value display flex items in row format from right to left. Flex items will also display in reverse format. The example is below.

As shown in the above example, flex items are displayed in horizontal format from right to left. The order of items is also reversed.

flex-direction: column-reverse;

The column-reverse value displays flex items in column format from top to bottom and items are also reversed.

As shown in the above example, items are displayed in horizontal format from top to bottom and items are also reversed.

Flex-wrap:

The flex-wrap attribute is used to arrange flex items in one line or multiple lines, according to its requirements. It has three different values to display items. All three values with their usage are defined below.

flex-wrap: wrap;

Wrap value arranges all flex items in multiple lines and wraps them properly. As shown in the example, multiple flex items are arranged in three different lines, according to their height and width.

flex-wrap: nowrap;

The 'nowrap' value is used to display flex items in a single line. When there is a need to display all flex items in a single line, at that time it is used. The example is shown below.

flex-wrap:wrap-reverse;

Wrap-reverse is used to display items in reverse with wrapping. It follows the same property as a wrap but items will display in reverse. The example is displayed below.

Flex-flow:

Flex-flow is a shorthand property of flex-direction and flex-wrap. When there is a requirement to setting direction and wrapping in a single element, at that time it is used.

Ex. flex-flow: row wrap;

This way, row-reverse, column, and column-reverse can be applied and at the place of wrap, nowrap and wrap-reverse can be used.

Justify-content:

Justify content is used to arrange space between multiple flex items. This attribute has different values to arrange items. Some of the values with its example are defined below.

justify-content: flex-start;

It arranges all flex items toward the main container's start side. In this example, flex items arrange in row format. So, it is arranged in a horizontal format.

justify-content: flex-end;

It arranges all flex items toward the main container's end side. In this example, flex items arrange in row format. So, it is arranged in a horizontal format and placed towards the end side of the container.

justify-content: center;

The center value of this attribute arranges all flex items in the center of the main container. The example is below.

justify-content: space-between;

The space between is used to arrange the first item at the start edge and the last items at the last edge of the main container. As the name suggests, it manages space between items.

justify-content: space-evenly;

It distributes equal space between items. As shown in the example, there is equal space between each item and the edge of the container.

justify-content: space-around;

It displays flex items so, that each item has equal space around them. As shown in the example, visually there is less space between the edge and the item compared to the space between items.

As shown in the example, the first item has one unit of space around the left and right. So, the space between the edge and the first item is one unit, while the space between the first and second items is two units. This way space around will work.

Note: If by default, flex-direction is a row, justify-content arranges flex item horizontally. In case, it changes to the column, it arranges items vertically.

Align-items:

Align-item used to arrange flex items vertically. It has also five different values. From them flex-start, flex-end and center are the same as the value of justify-content. The difference is only that, it arranges items vertically. These three values are written below.

align-items:flex-end;
align-items:center;
align-items:flex-start;

align-items: stretch;

Stretch is the default value of this attribute. It stretches items according to the main container but still follows the minimum and maximum size of the container.

As shown in the example, it stretches items' size according to the size of the container.

align-items: baseline;

The baseline value of this attribute arranges the items aligned to the baseline of the main container.

As shown in the example, the margin is 50px from the top. so items arrange according to the baseline of their container.

Align-content:

Align content is used to arrange the content of a web page. It has the same value as justify-content. The difference is only that, here it is used for arranging content. It can be written as below.

align-content:flex-start;

align-content:flex-end;

align-content: center;

align-content:space-between;

align-content:space-around;

align-content: stretch;

The stretch value is used to stretch lines to take up the remaining space and arrange the content.

Gap:

The gap is used to set gaps between rows and columns. It is a shorthand property of row-gap and column-gap. An example of applying the gap is below.

Ex.1: gap:50px;

Here, flex-direction is a column. When a 50px gap is applied to grid elements, the gap between columns is generated. In the case of flex-direction a row, the gap generates between rows.

In the same example, the container class has only one row. In this case, a 50px gap is applied in the row between flex items. The example is below.

Another two properties for applying a gap are row-gap and column-gap. Examples of both properties are below.

Ex.2: row-gap:10px;

As shown in the example, the row-gap property is applied to the main container class. So the gap of 10px is generated between two rows.

Ex.3 column-gap:30px;

As shown in above the example, the column gap is applied in the main-container class, which is 30px. In the second item, the gap is applied individually, which is 10px of the gap in the second child of the main container.

Order:

When there is a need to change the sequence of flex items, at that time the order property is used. The default value of the order is 0. Order is set in from the lower to the upper value. ex. -2, -1, 0, 1, 2.....

As shown in the example, in the third item, the order is applied to -2 and in the fourth item, the order is applied to -1. So, items display in a sequence of -2, -1, 0, 0. In the last two items, there is no order applied. So, it takes the default value as 0 and displays items this way.

Flex-grow:

Flex grow property is applied to child items. It is used to increase the size of items. It is unitless property. If 1 is applied to every flex item, it distributes the whole space equally.

As shown in the example, 3 is applied to the first element, which takes thrice of the total space and the rest of the items distribute the remaining space.

Flex-shrink

Flex shrink property is used to decrease the size of flex items whenever it is required. The example is below.

Here, in the second item flex-shrink is applied to 2. So, when the size of the container is decreased, at that time only the second item will shrink. So, this property is implemented at specific conditions.

Flex-shrink works based on priority, if the screen size got reduced, at that time if there is need to decrease the size specific element, for that particular element flex-shrink can be used.

Flex-basis:

The flex-basis property specifies the initial size of flex items before the extra space in the container is distributed. To set the width of flex items, it is used. It accepts keywords and values. Some of the keywords and values of the flex-basis are described below.

flex-basis: auto;

When the keyword auto applies at that time it takes height and width from the height and width property. The example is given below.

As shown in the example, the value of the flex-basis is applied auto. So, it takes the value of height and width properties.

flex-basis: content;

The value content set the size of items according to the content of flex items.

As shown in the above example, the value of the flex-basis is applied to content. So according to the size of the font and content, it takes size accordingly.

flex-basis:70px;

Here, in a class of items, the flex-basis applied to 70 px, which is shown in the above example.

Flex:

Flex is a shorthand property of flex-grow, flex-shrink and flex-basis. If a single value will be applied, it is considered a flex-grow value. Flex-shrink is considered as 1 and the flex-basis considered as 0%.

flex:5;

If there is a requirement of adding flex-shrink and flex-basis, it can be written as,

flex: 5 2 20px;

Here, 5 is the value of flex-grow.

2 is the value of flex-shrink.

20px is the value of the flex-basis.

The default value of the flex property is flex: 0 1 auto;

As a developer, it is good practice to use flex as a shorthand property, rather than using three properties individually.

Align-self:

Align-self property is used to set individual flex items. It applies to the child element. It has a different value to set flex items. An example of each value is given below. Align-self property works like align-items. It also set the items vertically.

align-self: flex-start;

Here, flex-start is applied to all four elements. So, they display at the top portion of the container.

align-self: flex-end;

Here, flex-end value is applied to items. So they display it at the bottom of the container.

align-self: center;

Here, the center value is applied to items. So they display it at the center of the container.

align-self: baseline;

When the value baseline is applied, items are displayed at the baseline of the body container, which is shown above.

align-self: stretch;

When the stretch value is applied, items take maximum height according to the parent container.