Day 6: Flexbox

What You Will Learn Today

• The core concepts behind Flexbox
• Container properties for controlling layout flow
• Item properties for fine-tuning individual elements
• Practical Flexbox patterns used in real projects

---

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system designed for distributing space and aligning items within a container. It excels at arranging elements in a row or column and handling the distribution of available space.

.container {
    display: flex;
}

When you set display: flex on an element, it becomes a flex container, and its direct children become flex items.

flowchart LR
    subgraph Flex["Flexbox Axes"]
        Main["Main Axis →"]
        Cross["Cross Axis ↓"]
    end
    style Main fill:#3b82f6,color:#fff
    style Cross fill:#8b5cf6,color:#fff

The main axis runs in the direction items are laid out (horizontal by default), while the cross axis runs perpendicular to it.

---

Container Properties

flex-direction

Controls the direction of the main axis.

.row         { flex-direction: row; }          /* Left to right (default) */
.row-reverse { flex-direction: row-reverse; }  /* Right to left */
.column      { flex-direction: column; }       /* Top to bottom */
.col-reverse { flex-direction: column-reverse; } /* Bottom to top */

justify-content (Main Axis Alignment)

Distributes items along the main axis.

.container { display: flex; }

.start   { justify-content: flex-start; }    /* Pack items to the start */
.center  { justify-content: center; }        /* Center items */
.end     { justify-content: flex-end; }      /* Pack items to the end */
.between { justify-content: space-between; } /* Even spacing, flush edges */
.around  { justify-content: space-around; }  /* Even spacing, half-size edges */
.evenly  { justify-content: space-evenly; }  /* Perfectly even spacing */

Value	Description
flex-start	Items packed to the start
center	Items centered
flex-end	Items packed to the end
space-between	Even spacing, first and last items flush with edges
space-around	Equal space around each item
space-evenly	Equal space between all items and edges

align-items (Cross Axis Alignment)

Aligns items along the cross axis.

.stretch  { align-items: stretch; }     /* Stretch to fill (default) */
.start    { align-items: flex-start; }  /* Align to top */
.center   { align-items: center; }      /* Center vertically */
.end      { align-items: flex-end; }    /* Align to bottom */
.baseline { align-items: baseline; }    /* Align text baselines */

flex-wrap

Controls whether items wrap onto multiple lines.

.nowrap { flex-wrap: nowrap; }    /* Single line (default) */
.wrap   { flex-wrap: wrap; }      /* Wrap onto new lines */

gap

Sets the spacing between flex items.

.container {
    display: flex;
    gap: 16px;         /* Both row and column gap */
    gap: 16px 24px;    /* Row gap, column gap */
    row-gap: 16px;     /* Row gap only */
    column-gap: 24px;  /* Column gap only */
}

Tip: Use gap instead of margin to manage spacing between items. It keeps your code cleaner and avoids extra margin on the first or last item.

---

Item Properties

flex-grow / flex-shrink / flex-basis

These three properties control how flex items grow, shrink, and establish their initial size.

.item {
    flex-grow: 1;     /* Take up a share of remaining space */
    flex-shrink: 1;   /* Shrink when space is insufficient */
    flex-basis: 200px; /* Initial size before growing/shrinking */
}

/* Shorthand */
.item { flex: 1; }          /* flex: 1 1 0% */
.item { flex: 0 0 300px; }  /* Fixed 300px, no grow/shrink */
.item { flex: 1 1 200px; }  /* Start at 200px, grow and shrink */

flowchart LR
    subgraph FlexProperty["flex Shorthand"]
        Grow["flex-grow<br>How much it grows"]
        Shrink["flex-shrink<br>How much it shrinks"]
        Basis["flex-basis<br>Starting size"]
    end
    style Grow fill:#22c55e,color:#fff
    style Shrink fill:#ef4444,color:#fff
    style Basis fill:#3b82f6,color:#fff

align-self

Overrides the container's align-items for a single item.

.item-special {
    align-self: center;    /* Center only this item */
}

order

Changes the visual order of an item without changing the HTML source order.

.first  { order: -1; }   /* Displayed first */
.last   { order: 1; }    /* Displayed last */

---

Common Flexbox Patterns

1. Perfect Centering

.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

2. Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

3. Card Grid (Flex Wrap)

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card {
    flex: 1 1 300px;    /* Minimum 300px, grows to fill */
    max-width: 400px;
}

4. Sticky Footer

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;    /* Takes all remaining space */
}

5. Sidebar Layout

.split {
    display: flex;
}

.split-left  { flex: 1; }
.split-right { flex: 1; }
/* Or a fixed sidebar */
.sidebar { flex: 0 0 300px; }
.content { flex: 1; }

---

Practice: Navigation Bar and Card Layout

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

.nav-links a {
    color: #64748b;
    text-decoration: none;
}

.nav-links a:hover {
    color: #3b82f6;
}

/* Main Content */
main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
    width: 100%;
}

/* Card Grid */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card {
    flex: 1 1 280px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    color: #64748b;
    font-size: 0.875rem;
}

/* Footer */
footer {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

---

Summary

Property	Applies To	Description
display: flex	Container	Enables Flexbox
flex-direction	Container	Sets the main axis direction
justify-content	Container	Aligns items along the main axis
align-items	Container	Aligns items along the cross axis
flex-wrap	Container	Controls line wrapping
gap	Container	Spacing between items
flex	Item	Growth, shrink, and initial size
align-self	Item	Individual cross-axis alignment
order	Item	Visual display order

Key Takeaways

1. display: flex creates a flex container
2. justify-content controls the main axis, align-items controls the cross axis
3. Use gap to manage spacing between items cleanly
4. flex: 1 distributes remaining space equally among items

---

Exercises

Exercise 1: Basics

Use Flexbox to arrange three cards side by side with equal widths.

Exercise 2: Intermediate

Build a navigation bar with space-between alignment (logo on the left, links on the right).

Challenge

Construct a full page layout (header, sidebar + main content, footer) using only Flexbox.

---

References

• MDN - Flexbox
• CSS-Tricks - A Complete Guide to Flexbox
• Flexbox Froggy - Learn Flexbox through a game

---

Next up: In Day 7, you will learn about CSS Grid -- the two-dimensional layout system that gives you full control over rows and columns simultaneously.