Css Flex

What is Flex in CSS?
Flex (Flexbox) is a CSS layout system that makes it easy to arrange items in a row or column. It allows you to align, size, and distribute space between items inside a container.Flexbox helps create responsive and flexible web layouts with less code.

How does Flex work?

Flex works with two parts:

1. Flex Container – The parent element.

2. Flex Items – The child elements inside the parent.

First make the parent a flex container:

.container {
display: flex;
}

Example:

Box 1
Box 2
Box 3

.container {
display: flex;
}

Output:

Box 1 Box 2 Box 3

The boxes appear in one row because of display: flex.
**
Common Flex properties**

• display: flex; – Enables Makes the container a flex container.
• flex-direction – Sets the direction (row or column).
• justify-content – Aligns items horizontally.
• align-items – Aligns items vertically.
• flex-wrap – Allows items to move to the next line if needed.
• gap – Adds space between items.
• Size (flex-grow, flex-shrink, flex-basis)

Example:

Think of Flexbox as a teacher.
The container is like the teacher giving instructions.
The items are like students following those instructions.

The teacher can tell students to:

• Stand in a row.
• Stand in a column.
• Leave equal space.
• Stand in the center.