CSS Flexbox – Detailed Explanation

CSS Flexbox (Flexible Box Layout) is a powerful layout system that helps create responsive and flexible designs. It is mainly used to align, distribute, and arrange elements efficiently, even when their sizes are unknown.

1️⃣ What is Flexbox?

Flexbox provides a way to distribute space among elements inside a container and align items efficiently. It consists of:

Flex Container → The parent element (display: flex;)
Flex Items → The child elements inside the container

2️⃣ How to Use Flexbox?

To use Flexbox, you must apply display: flex; to the container:

.container {
  display: flex;
}

✔ Now, all direct children of .container become flex items.

3️⃣ Main Flexbox Properties

🔹 1. `display: flex;`

This makes an element a flex container, allowing its children to be flexible.

🔹 2. `flex-direction` (Main Axis Control)

Defines the direction of flex items.

Value	Effect
`row` (default)	Items are placed horizontally (left to right)
`row-reverse`	Items are placed horizontally (right to left)
`column`	Items are placed vertically (top to bottom)
`column-reverse`	Items are placed vertically (bottom to top)

.container {
  display: flex;
  flex-direction: row; /* Default */
}

🔹 3. `justify-content` (Horizontal Alignment)

Controls how items are distributed along the main axis.

Value	Effect
`flex-start` (default)	Items start at the beginning of the container
`flex-end`	Items align at the end
`center`	Items align at the center
`space-between`	Items are evenly spread, with no space on the edges
`space-around`	Items have equal space around them
`space-evenly`	Items have equal space between them

.container {
  display: flex;
  justify-content: center;
}

🔹 4. `align-items` (Vertical Alignment)

Controls the vertical alignment of items within a row.

Value	Effect
`stretch` (default)	Items stretch to fill the container height
`flex-start`	Items align at the top
`flex-end`	Items align at the bottom
`center`	Items align in the middle
`baseline`	Items align based on text baseline

.container {
  display: flex;
  align-items: center;
}

🔹 5. `flex-wrap` (Wrap Items)

Controls whether items wrap when they exceed the container width.

Value	Effect
`nowrap` (default)	Items do not wrap (stay in one line)
`wrap`	Items wrap to the next line
`wrap-reverse`	Items wrap in reverse order

.container {
  display: flex;
  flex-wrap: wrap;
}

🔹 6. `align-content` (Spacing for Multiple Rows/Columns)

Controls spacing between rows or columns (only works when flex-wrap: wrap; is applied).

Value	Effect
`stretch` (default)	Rows stretch to fill container height
`flex-start`	Rows align at the top
`flex-end`	Rows align at the bottom
`center`	Rows align at the center
`space-between`	Rows spread with no space on edges
`space-around`	Rows have equal space around them

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

🔹 7. `flex-grow`, `flex-shrink`, `flex-basis` (Item Flexibility)

✔ flex-grow: Defines how much an item grows relative to others.
✔ flex-shrink: Defines how much an item shrinks relative to others.
✔ flex-basis: Defines the default size of an item.

5️⃣ Summary Table

Property	Effect
`display: flex;`	Enables flexbox on the container
`flex-direction`	Sets the direction (row, column)
`justify-content`	Aligns items horizontally
`align-items`	Aligns items vertically
`flex-wrap`	Allows wrapping
`align-content`	Controls multiple row alignment
`flex-grow`	Controls item growth
`flex-shrink`	Controls item shrinking
`flex-basis`	Sets initial size of an item

6️⃣ Conclusion

Flexbox is a powerful tool for responsive designs, making it easy to align and distribute elements efficiently.

Use display: flex; to enable Flexbox.
Adjust flex-direction, justify-content, and align-items to control alignment.
Use flex-grow, flex-shrink, and flex-wrap for flexibility.

CSS

CSS Flexbox – Detailed Explanation

1️⃣ What is Flexbox?

2️⃣ How to Use Flexbox?

3️⃣ Main Flexbox Properties

🔹 1. display: flex;

🔹 2. flex-direction (Main Axis Control)

🔹 3. justify-content (Horizontal Alignment)

🔹 4. align-items (Vertical Alignment)

🔹 5. flex-wrap (Wrap Items)

🔹 6. align-content (Spacing for Multiple Rows/Columns)

🔹 7. flex-grow, flex-shrink, flex-basis (Item Flexibility)