Day 5: Flexbox I - The Axis

Before Flexbox, we used float and tables for layout. It was a nightmare. Flexbox is a 1-Dimensional Layout Model. It arranges items in a row OR a column.

The Container

You activate Flexbox on the Parent.

.container {
    display: flex;
}

By default:

• Items line up in a Row (left to right).
• Items do not stretch; they shrink to fit content.

The Axis (flex-direction)

• row (Default): Left to Right.
• column: Top to Bottom. (This creates a vertical stack).
• row-reverse: Right to Left.

.vertical-stack {
    display: flex;
    flex-direction: column;
}

Justify Content (Main Axis)

How to distribute space along the direction (usually Horizontal).

.container {
    display: flex;
    /* Options: */
    justify-content: flex-start; /* Default (Left) */
    justify-content: center; /* Center */
    justify-content: flex-end; /* Right */
    justify-content: space-between; /* Push items to edges */
    justify-content: space-around; /* Equal spacing around */
}

Align Items (Cross Axis)

How to align items perpendicular to the direction (usually Vertical).

.container {
    display: flex;
    height: 300px; /* Needs height to work! */
    align-items: stretch; /* Default: Full Height */
    align-items: center; /* Vertical Middle! Finally! */
    align-items: flex-start; /* Top */
    align-items: flex-end; /* Bottom */
}

Homework for Day 5:

1. Create a Navbar.
2. Left side: “My Logo”. Right side: 3 Links (“Home”, “About”, “Contact”).
3. Use display: flex and justify-content: space-between to push them apart.
4. Vertically center them with align-items: center.

Day 6: We dive deeper into Wrapping and Sizing!