CONTENTS-->

1. FLEXBOX
2. DISPLAY FLEX
3. FLEX DIRECTION
4. WRAP CONTENT
5. JUSTIFY CONTENT
6. ALIGN ITEMS
7. FLEX INDIVIDUAL ITEMS OR MULTIPLE ITEMS

FLEXBOX---->

Flexbox is one dimensional layout. It is the property of CSS by which we can change into row or column means the direction of model which we are implementing. Everything in flexbox depends on two terms which are main axis and cross-axis and they are perpendicular to each other. The main axis is determined by the flex-direction property. The property of Flexbox in CSS can be assured with a concept of containers and items, every element which is to be layout needs to be inside a container, this container is known as a flex container and the element is known as a flex-items.

The default property in CSS is column but as soon as we implement flex in it then it is changes to row.

FLEX DIRECTION-->

FLEX DIRECTION-ROW :

The default direction of flex-direction property is row. This property sets the row as the cross axis.

FLEX DIRECTION-ROW REVERSE:

This property reverses the items from left to right to right to left and moves the element toward the end of the container.

FLEX DIRECTION-COLUMN :

This property set’s the column as the main axis so items are arranged from top to bottom.

FLEX DIRECTION-COLUMN REVERSE:

This property reverses the items from top to bottom to bottom to top and moves the item toward the end of the container.

#WRAP CONTENT--> In CSS FLEX WRAP CONTENT by default, every item would be fitted in one line, but the items can be wrapped and moved to the nest line. There are three values flex-wrap: wrap, flex-wrap :wrap-reverse and flex-wrap: no-wrap. It allows us to wrap the content in webpages and make use of it as and when required. By default the property of flex wrap is no-wrap.

Flex-Wrap: No-Wrap :

By default the property of flex wrap is no wrap . So it will not wrap the items into the next line.

Flex - Wrap : Wrap :

It will wrap content into multiple lines from top to bottom approach. Here box6 and box7 are wrapped into the next line. If the size of the container is reduced then by wrap property the items will be moving to the next line.

Flex-Wrap: Wrap-Reverse :

In this property it will wrap the items in the next line but from bottom to top. Here box6 and box7 are wrapped as per the wrap reverse property.

JUSTIFY CONTENT-->

Justify Content is used to align the items along the main axis. It is used to give space between the items.

Justify-content : flex-start :

It is the default property of justify-content by default the item will start from the left side.

Justify-content : flex-end :

This property is used to move the items to the end.

Justify-content : center :

This property is used to move the items to the center.

Justify-content : space around :

In this case it spreads space around the items with equal space but when items have their own space it takes space in respective of their properties or in other words this property is used to evenly distributes the items, with equal space around them.

Justify-content : space evenly :

In this case it spreads space evenly for the items with equal space or in other words this property is used to distribute equal space around the items.

Justify-content : space between :

In this case it spreads space between the items with equal space. the first item at the start and the last item at the end of the web page

ALIGN ITEMS-->

It is used to control the alignment of items along the cross-axis.

Allign Items-Flex Start :

In this case items are placed at the start of the cross-axis.

Align Items-Flex End :

In this case with flex-end items are placed at the end of the cross-axis

Align Items-Center :

It is used for align-items vertically center or in other words this property is used to align items to the center along the cross-axis.

Row gap :

This property is used to provide gap between rows.

In this case there is a row gap of 30px between the first row and second row.

Column gap :

This property is used to Provides gap between columns.

In this case there is a column gap of 30px between the first, second, third, fourth and fifth column.

Row and Column gap :

This property is used to Provides gap between rows and columns.

In this case there are row gap and column gap of 30px.

FLEX INDIVIDUAL ITEMS OR MULTIPLE ITEMS -->

ORDER :

Order is given only to the child elements. So here by default, box items are given in the source order. Here in the box1 order is given as 1 and in the box2 order is given as 2 so it controls the order in which the appear in the flex container. So the boxes are arranged in the increasing order of their order value, from lower order values to the higher order values boxes are arranged.

FLEX-GROW :

It states the ability for a flex item to grow if necessary. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

Here the properties for box1 is set to flex-grow:2 and for box5 it is set to flex-grow:2.

FLEX-SHRINK :

It allows the CSS items to shrink according to the properties of CSS.

ALIGN-SELF :

With the help this CSS property we can separate items to Flex-start, flex-end, center, stretch, and baseline.

Here in the first case the box1 is set to flex-end with the align-self CSS property. Here in the second case the box2 is set to center with the align-self CSS property.