CSS Flexbox

🎯 What You'll Learn

What is Flexbox and when to use it
Flex container properties
Flex item properties
Aligning and distributing space
Common layout patterns
Responsive flex layouts

📚 Core Concepts

1. What is Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

/* The magic property that starts it all */
.container {
    display: flex;  /* Now it's a flex container! */
}

Before Flex:

Item 1

Item 2

Item 3

After Flex:

Item 1

Item 2

Item 3

2. Flex Direction

Controls the main axis direction

.container {
    display: flex;
    flex-direction: row;         /* → default, left to right */
    flex-direction: row-reverse; /* ← right to left */
    flex-direction: column;      /* ↓ top to bottom */
    flex-direction: column-reverse; /* ↑ bottom to top */
}

Row (default):

Column:

3. Justify Content (Main Axis)

Aligns items along the main axis

.container {
    display: flex;
    justify-content: flex-start;    /* ⬅ default */
    justify-content: flex-end;      /* ➡ */
    justify-content: center;        /* ⬅➡ */
    justify-content: space-between; /* ⬅   ➡ */
    justify-content: space-around;  /* ⬅  ⬅➡  ➡ */
    justify-content: space-evenly;  /* ⬅  ⬅➡  ➡ */
}

space-between:

center:

4. Align Items (Cross Axis)

Aligns items along the cross axis

.container {
    display: flex;
    align-items: stretch;    /* ⬍⬍⬍ default, fill container */
    align-items: flex-start; /* ⬆ top */
    align-items: flex-end;   /* ⬇ bottom */
    align-items: center;     /* ⬆⬇ middle */
    align-items: baseline;   /* Text baseline alignment */
}

5. Gap (Spacing)

Modern way to add space between items

.container {
    display: flex;
    gap: 20px;           /* Same space between all items */
    gap: 20px 10px;      /* row-gap column-gap */
    row-gap: 20px;       /* Vertical spacing */
    column-gap: 10px;    /* Horizontal spacing */
}

💡 Tip: Use gap instead of margins on flex items - it's cleaner!

6. Flex Wrap

Control wrapping behavior

.container {
    display: flex;
    flex-wrap: nowrap;       /* All in one line (default) */
    flex-wrap: wrap;         /* Wrap to new lines */
    flex-wrap: wrap-reverse; /* Wrap in reverse */
}

7. Flex Item Properties

Control individual items

/* Make an item grow */
.item {
    flex-grow: 1;    /* Grow to fill space */
    flex-grow: 2;    /* Grow twice as much */
}

/* Make an item shrink */
.item {
    flex-shrink: 1;  /* Can shrink (default) */
    flex-shrink: 0;  /* Cannot shrink */
}

/* Set initial size */
.item {
    flex-basis: 200px;  /* Start at 200px */
    flex-basis: 50%;    /* Start at 50% */
}

/* Shorthand for grow, shrink, basis */
.item {
    flex: 1;           /* flex: 1 1 0 */
    flex: 0 0 200px;   /* No grow, no shrink, 200px */
}

/* Self-alignment */
.item {
    align-self: flex-start;
    align-self: center;
    align-self: flex-end;
}