CSS Flexbox

The Flexible Box Layout Module (Flexbox) makes it easier to design flexible, responsive layout structures without using floats or positioning. It allows you to align, distribute space, and manage the size of items within a container.

---

Flex Container and Items

To start using Flexbox, you must first define a flex container by setting display: flex on the parent element. All direct children automatically become flex items.

.container {
    display: flex;
}

---

Key Flex Properties

1. flex-direction

Defines in which direction the items are placed (row, column, row-reverse, column-reverse).

.container {
    flex-direction: column;
}

---

2. justify-content

Used to align flex items horizontally (along the main axis).

• center — Items are in the center.
• space-between — Items are evenly distributed.
• space-around — Items have space on both sides.

.container {
    justify-content: space-between;
}

---

3. align-items

Used to align flex items vertically (along the cross axis).

.container {
    align-items: center;
    height: 100px;
}

---

Perfect Centering

Flexbox is the easiest way to center an element both horizontally and vertically with just three lines of code.

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

---

---