FLEXBOX:

Flexbox is a layout system in CSS that helps you create flexible and responsive layouts. It makes it easy to align and distribute elements within a container, even when their sizes are unknown or dynamic.

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.

FLEX DIRECTION:

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.

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 is a simple property that allows flex items to wrap onto multiple lines when there's not enough space on one line.

Think of it like a text wrapping onto a new line when it reaches the edge of a page!

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.

Align 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.

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 box2 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.

• If flex-shrink is set to 0, the items will overflow the container.

• If flex-shrink is set to a value greater than 0 (usually 1), the items will shrink to fit the container.