FLEX-BOX :

Flexbox is a feature in CSS that provides a powerful way to create flexible and responsive layouts for web pages. It is a one-dimensional layout model that allows us to arrange elements along a single axis, either horizontally or vertically. With Flexbox, we can easily control the sizing, alignment, and distribution of elements inside a container, even when the container's size or content changes. It's a more advanced and user-friendly alternative to traditional layout methods like floats and positioning.

Flexbox is based on the idea of containers and items. Every element that we want to layout using a flexbox needs to be placed inside a container, which is known as a flex container. The individual elements inside the container are referred to as flex items. By default, the layout direction is vertical (column), but when we apply flexbox to the container, it transforms into a horizontal layout (row). This gives the ability to easily organize and align elements on a webpage according to needs and preferences.

1. Display-Flex :

` Display: flex ` is a property that allows us to create flexible layouts. When applied to a container element, it turns its children into flexible items. This means we can easily control the arrangement, alignment, and spacing of the items inside the container.

This means that by default when you apply `display: flex` to a container element, it changes the layout mode from the default "column" to the flexbox layout mode, where the container's children are arranged horizontally along the main axis.

2. Flex Direction :

i. FLEX DIRECTION-ROW :

When `flex-direction: row` is used in a flex container, it arranges flex items horizontally from left to right. It creates a layout where items flow in a straight line horizontally.

ii. FLEX DIRECTION-ROW REVERSE :

When we apply the `flex-direction: rowreverse` property, it reverses the order of flex items from left to right, making them appear from right to left. This means that the last item becomes the first, and the first item becomes the last in the row.

iii. FLEX DIRECTION-COLUMN :

When `flex-direction: column` is used in a flex container, it arranges flex items from top to bottom. It creates a layout where items flow in a top-to-bottom order.

iv. FLEX DIRECTION-COLUMN REVERSE :

`flex-direction: column` is a property, that reverses the order of flex items, making them appear from bottom to top. It changes the layout from top-to-bottom to a bottom-to-top arrangement, with the last item becoming the first and vice versa. The items are moved toward the end of the flex container.

3. FLEX -WRAP:

i. FLEX-WRAP: NO-WRAP :

By default, the property of flex-wrap is set to "nowrap" which means that flex items will not wrap into the next line.

ii. FLEX-WRAP: WRAP :

flex-wrap: wrap allows flex items to be wrapped onto multiple lines, ensuring that they adjust and reflow to fit within the container's space, even when the size is reduced.

iii. FLEX-WRAP: WRAP -REVERSE :

So, flex-wrap: wrap-reverse wraps items onto multiple lines, but in reverse order, starting from the bottom and moving upward.

4. ALIGN ITEMS :

The "align-items" property is a way to control how flex items are vertically aligned within a flex container. It specifies the alignment along the cross-axis, which is perpendicular to the main axis of the container.

i.ALIGN-ITEMS: FLEX-START :

It aligns the items to the beginning of the container in the vertical direction.

ii. ALIGN-ITEMS: FLEX-END:

It aligns the items to the bottom of the container in the vertical direction.

iii. ALIGN-ITEMS: CENTER :

The "align-items" property, when set to "center," is used to vertically align items at the center of the cross-axis.

5. JUSTIFY CONTENT :

The "justify-content" property is used to control the alignment of items along the main axis.

i. JUSTIFY-CONTENT: FLEX-START :

It makes the items start from the left side or top side of the container along the main axis.

ii. JUSTIFY-CONTENT: FLEX- END :

The `justify-content: flex-end` property is used to move the items to the end.

iii. JUSTIFY-CONTENT: CENTER :

The `justify-content: center` property is used to move the items to the center.

iv. JUSTIFY-CONTENT: SPACE-AROUND :

`justify-content: space-evenly ` property is used to evenly distribute items inside a container, providing equal space around each item. It creates balanced spacing between elements, including space between adjacent items and between the first and last items and the container edges.

v. JUSTIFY-CONTENT: SPACE-EVENLY :

The `justify-content: space-evenly` property evenly distributes the items within a container, with equal space around them.

vi. JUSTIFY-CONTENT: SPACE-BETWEEN :

The `justify-content: space-between` property evenly distributes space between the items in a container. It places the first item at the beginning and the last item at the end.

6. FLEX-GROW :

The `flex-grow` property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

7. FLEX-SHRINK :

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