Day 2 - Flexbox

Flexbox is a layout model that allows you to design complex layouts easily and responsively. It usually involves a Parent Container and Child Items.

---

1. Flex Direction

Controls the direction in which items are laid out.

Code:

/* CSS */
/* Default: Lays out items in a row (Left to Right) */
.row {
    display:  flex;
    flex-direction: row;
}

/* Lays out items in a column (Top to Bottom) */
.column {
    display:  flex;
    flex-direction: column;
}

Output (Row):

Output (Column):

---

2. Justify Content (Main Axis)

Aligns items horizontally (if direction is row). Useful for spacing.

Code:

/* CSS */
.j-start {
    justify-content: flex-start;
}
/* Default */
.j-center {
    justify-content: center;
}
.j-end {
    justify-content: flex-end;
}
.j-between {
    justify-content: space-between;
}
.j-around {
    justify-content: space-around;
}

Output:

---

3. Align Items (Cross Axis)

Aligns items vertically (if direction is row).

Code:

/* CSS */
.a-center {
    align-items:  center;
}
.a-stretch {
    align-items:  stretch;
} /* Default: Stretch to fill height */

Output:

---

4. Flex Wrap

Allows items to wrap onto multiple lines if there isn't enough space.

Code:

/* CSS */
.wrap-container {
    display:  flex;
    flex-wrap:  wrap;
    width:  300px;
}

Output:

---

5. Practical Example: Navigation Bar

Common pattern: Logo on the left, Links on the right.

Code:

/* CSS */
.navbar {
    display:  flex;
    justify-content: space-between; /* Push apart */
    align-items:  center;
}

Output: