CSS – Property display: flex

Flex box layout.

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

---

1. display: flex;

• Enables Flexbox for the element.
• Makes child elements (flex items) automatically adjust based on the flex container’s rules.
• Allows better alignment and spacing control compared to traditional methods like float or inline-block.

---

2. justify-content: center;

• Aligns child elements horizontally in the center of the flex container.
• Works along the main axis (default is left to right).
• Example of different values:
  • flex-start → Aligns items to the left.
  • flex-end → Aligns items to the right.
  • space-between → Places items with equal space between them.
  • space-around → Gives equal space around items.

---

3. align-items: center;

• Aligns child elements vertically in the center of the flex container.
• Works along the cross axis (default is top to bottom).
• Example of different values:
  • flex-start → Aligns items to the top.
  • flex-end → Aligns items to the bottom.
  • stretch → Stretches items to fill the container.

---

Example: Centering a Box Inside a Container

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    background-color: lightgray;
}

.box {
    width: 100px;
    height: 50px;
    background-color: blue;
    color: white;
    text-align: center;
}

<div class="container">
    <div class="box">Centered</div>
</div>

How It Works?

• .container becomes a flexbox.
• .box is positioned horizontally & vertically centered inside .container.

When you apply display: flex; to an element (e.g., .container), it turns into a flex container, and its direct child elements become flex items. This means:

1. The container gains control over how its child elements are arranged.
2. The child elements align and distribute dynamically based on Flexbox properties.
3. The container follows a main axis and a cross axis for positioning items.

---

1. Flex Container (display: flex;)

When display: flex; is applied to .container, it becomes a flex container.

• Before applying Flexbox:
  • Child elements behave as block or inline elements.
  • They stack vertically or flow inline based on default behavior.
• After applying Flexbox:
  • Child elements (.box, etc.) behave as flex items.
  • You can control alignment, spacing, wrapping, and ordering.

---

2. Flex Items (Child Elements)

Any direct children inside the .container automatically become flex items.
These items respond to flex properties such as:

• justify-content (Horizontal alignment)
• align-items (Vertical alignment)
• flex-wrap, flex-grow, order, etc.

---

3. Flexbox Works on Two Axes

When .container is set to display: flex;, it follows two axes:

1. Main Axis (Primary Direction of Items)
   • By default, it’s left to right (row-wise).
   • Controlled by justify-content.
   • Can be changed using flex-direction: column; (to make items stack vertically).
2. Cross Axis (Perpendicular to Main Axis)
   • By default, it’s top to bottom.
   • Controlled by align-items.

---

Example: Centering a Box Using Flexbox

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 300px;
    background-color: lightgray;
}

.box {
    width: 100px;
    height: 50px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 50px;
}

<div class="container">
    <div class="box">Centered</div>
</div>

How It Works?

1. .container becomes a flexbox (display: flex;).
2. .box becomes a flex item.
3. justify-content: center; moves .box horizontally to the center.
4. align-items: center; moves .box vertically to the center.

---

Before vs. After Flexbox

🔴 Without Flexbox (Default Behavior)

• .box follows normal document flow.
• To center it, you’d need complex CSS (margin, positioning, etc.).

🟢 With Flexbox

• .box automatically aligns to the center.
• Less code, more flexibility.

---

Benefits of Flexbox

✔ Simple way to align elements (centering, spacing, distribution).
✔ Responsive layouts without media queries.
✔ Works well for dynamic content.

When to Use This?

• Centering elements easily (e.g., buttons, text, images).
• Creating responsive layouts without using complex positioning techniques.
• Aligning multiple items inside a container.