#113 What is flexbox in CSS?

Flexbox (Flexible Box Layout) is a CSS layout model designed to efficiently arrange, align, and distribute space among items in a container — even when their sizes are dynamic.

---

🔹 Why Use Flexbox?

• Handles one-dimensional layouts (row or column).
• Makes aligning items easy (center, space-between, etc.).
• Supports responsive design without floats or manual positioning.

---

🔹 Main Components:

1. Flex Container – The parent element with display: flex;.
2. Flex Items – The direct child elements of the container.

---

🔹 Key Flex Container Properties:

Property	Description
display: flex	Enables flexbox on the container.
flex-direction	Row (row, default) or column layout.
justify-content	Horizontal alignment (main axis).
align-items	Vertical alignment (cross axis).
flex-wrap	Controls wrapping of items.

---

🔹 Key Flex Item Properties:

Property	Description
flex	Shorthand for flex-grow, shrink, basis.
order	Controls item order.
align-self	Aligns individual item on cross axis.

---

🔹 Example:

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

---

🔹 Output:

• Items arranged in a row.
• Even space between them.
• Vertically aligned in the center.