CSS 24 💻 flexbox layout introduction - KandZ

Flexbox (Flexible Box Layout) is a one-dimensional layout system that allows you to arrange elements in rows or columns with flexible sizing and alignment. It’s perfect for responsive designs where items need to resize, reorder, or align based on available space.

What is Flexbox?

Flexbox is a layout model that distributes space among items in a container and provides powerful alignment capabilities. Unlike Grid (which is two-dimensional), Flexbox works in one dimension at a time — either a row or a column.

Key Benefits:

Benefit	Description
One-dimensional	Layout items in a row or column
Flexible sizing	Items grow or shrink to fill space
Easy alignment	Center, space-between, space-around, etc.
Order control	Reorder items without changing HTML
Responsive	Adapts to different screen sizes automatically

Flexbox Basics

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

.container {
    display: flex;
}

.item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    border: 2px solid black;
}

What happens:

The container becomes a flex container
The children become flex items
Items are laid out in a row (default direction)
Items are placed side by side

The Main Axis and Cross Axis

Every flex container has two axes:

Axis	Description	Default Direction
Main axis	The primary direction items are laid out	Horizontal (row)
Cross axis	Perpendicular to the main axis	Vertical (column)

Main Axis (row):
┌─────────────────────────────────────────────────┐
│  Item 1  │  Item 2  │  Item 3  │  Item 4        │
└─────────────────────────────────────────────────┘
     ↑ Cross Axis (column)

Important: The main and cross axes change when you change flex-direction.

flex-direction	Main Axis	Cross Axis
`row` (default)	Horizontal	Vertical
`column`	Vertical	Horizontal
`row-reverse`	Horizontal (reversed)	Vertical
`column-reverse`	Vertical (reversed)	Horizontal

Flexbox Properties Overview

Property	Applies To	Description
`flex-direction`	Container	Defines the main axis (row or column)
`flex-wrap`	Container	Allows items to wrap to the next line
`justify-content`	Container	Aligns items along the main axis
`align-items`	Container	Aligns items along the cross axis
`align-content`	Container	Aligns wrapped lines along the cross axis
`flex-grow`	Item	How much an item can grow
`flex-shrink`	Item	How much an item can shrink
`flex-basis`	Item	Initial size of an item
`flex`	Item	Shorthand for grow, shrink, basis
`order`	Item	Changes the order of items
`align-self`	Item	Overrides `align-items` for one item

1. flex-direction

Defines the main axis — the direction items are laid out.

.container {
    display: flex;
    flex-direction: row; /* Default — left to right */
}

.container {
    display: flex;
    flex-direction: column; /* Top to bottom */
}

.container {
    display: flex;
    flex-direction: row-reverse; /* Right to left */
}

.container {
    display: flex;
    flex-direction: column-reverse; /* Bottom to top */
}

2. flex-wrap

Controls whether items wrap to the next line when there isn’t enough space.

.container {
    display: flex;
    flex-wrap: nowrap; /* Default — no wrapping */
}

.container {
    display: flex;
    flex-wrap: wrap; /* Items wrap to next line */
}

.container {
    display: flex;
    flex-wrap: wrap-reverse; /* Items wrap in reverse */
}

3. flex-grow, flex-shrink, flex-basis

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

.item {
    flex-grow: 0;    /* Default — no growth */
    flex-shrink: 1;  /* Default — can shrink */
    flex-basis: auto; /* Default — auto size */
}

/* Shorthand */
.item {
    flex: 1; /* grow: 1, shrink: 1, basis: 0 */
}

.item {
    flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 200px */
}

Property	Description	Default
`flex-grow`	How much an item can grow	`0`
`flex-shrink`	How much an item can shrink	`1`
`flex-basis`	Initial size before distribution	`auto`

4. flex (Shorthand)

The flex property combines flex-grow, flex-shrink, and flex-basis into one declaration.

/* Common patterns */
.item {
    flex: 1;           /* grow: 1, shrink: 1, basis: 0 */
}

.item {
    flex: auto;        /* grow: 1, shrink: 1, basis: auto */
}

.item {
    flex: none;        /* grow: 0, shrink: 0, basis: auto */
}

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

5. justify-content

Aligns items along the main axis.

.container {
    display: flex;
    justify-content: flex-start;    /* Default — start */
    justify-content: flex-end;      /* End */
    justify-content: center;        /* Center */
    justify-content: space-between; /* Equal space between */
    justify-content: space-around;  /* Equal space around */
    justify-content: space-evenly;  /* Equal space everywhere */
}

6. align-items

Aligns items along the cross axis.

.container {
    display: flex;
    align-items: stretch;     /* Default — fill height */
    align-items: flex-start;  /* Top */
    align-items: flex-end;    /* Bottom */
    align-items: center;      /* Center */
    align-items: baseline;    /* Align to text baseline */
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout Introduction</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        /* ====== FLEX CONTAINERS ====== */
        .container {
            display: flex;
            background: #e9ecef;
            padding: 10px;
            border-radius: 8px;
            margin: 15px 0;
            min-height: 80px;
        }

        .item {
            background: #007bff;
            color: white;
            padding: 15px 20px;
            border-radius: 6px;
            text-align: center;
            font-weight: bold;
            border: 2px solid #0056b3;
        }

        .item:nth-child(even) {
            background: #28a745;
            border-color: #1e7e34;
        }

        .item:nth-child(3n) {
            background: #dc3545;
            border-color: #a71d2a;
        }

        /* Direction demos */
        .dir-row {
            flex-direction: row;
        }

        .dir-column {
            flex-direction: column;
        }

        .dir-row-reverse {
            flex-direction: row-reverse;
        }

        .dir-column-reverse {
            flex-direction: column-reverse;
        }

        /* Wrap demos */
        .wrap-nowrap {
            flex-wrap: nowrap;
        }

        .wrap-wrap {
            flex-wrap: wrap;
        }

        .wrap-wrap .item {
            width: 200px;
        }

        /* Grow/shrink demos */
        .grow-demo .item.grow-1 {
            flex-grow: 1;
        }

        .grow-demo .item.grow-2 {
            flex-grow: 2;
        }

        /* Justify-content demos */
        .justify-start {
            justify-content: flex-start;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-end {
            justify-content: flex-end;
        }

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

        .justify-around {
            justify-content: space-around;
        }

        .justify-evenly {
            justify-content: space-evenly;
        }

        /* Align-items demos */
        .align-demo {
            height: 150px;
        }

        .align-start {
            align-items: flex-start;
        }

        .align-center {
            align-items: center;
        }

        .align-end {
            align-items: flex-end;
        }

        .align-stretch {
            align-items: stretch;
        }

        .align-baseline {
            align-items: baseline;
        }

        /* Axis visualization */
        .axis-demo {
            position: relative;
            padding: 30px 20px;
        }

        .axis-demo .main-axis {
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            color: #dc3545;
            font-size: 0.85rem;
        }

        .axis-demo .cross-axis {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            color: #6c5ce7;
            font-size: 0.85rem;
            writing-mode: vertical-rl;
        }
    </style>
</head>
<body>

    <h1>Flexbox Layout Introduction</h1>

    <!-- ====== 1. BASIC FLEXBOX ====== -->
    <section>
        <h2>1. Basic Flexbox</h2>
        <p>Setting <code>display: flex</code> on the container makes its children flex items, laid out in a row by default.</p>

        <div class="container axis-demo">
            <span class="main-axis">← Main Axis (row) →</span>
            <span class="cross-axis">↕ Cross Axis</span>
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
            <div class="item">Item 5</div>
        </div>

        <div class="code-block">
            .container {
                display: flex;  /* Makes this a flex container */
            }

            .item {
                /* Flex items are laid out in a row by default */
            }
        </div>
    </section>

    <!-- ====== 2. FLEX-DIRECTION ====== -->
    <section>
        <h2>2. flex-direction</h2>
        <p>Defines the main axis — the direction items are laid out.</p>

        <h3>flex-direction: row (default)</h3>
        <div class="container dir-row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>flex-direction: column</h3>
        <div class="container dir-column" style="min-height: 250px;">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>flex-direction: row-reverse</h3>
        <div class="container dir-row-reverse">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>flex-direction: column-reverse</h3>
        <div class="container dir-column-reverse" style="min-height: 250px;">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <div class="code-block">
            .container { flex-direction: row; }            /* Default — left to right */
            .container { flex-direction: column; }         /* Top to bottom */
            .container { flex-direction: row-reverse; }    /* Right to left */
            .container { flex-direction: column-reverse; } /* Bottom to top */
        </div>
    </section>

    <!-- ====== 3. FLEX-WRAP ====== -->
    <section>
        <h2>3. flex-wrap</h2>
        <p>Controls whether items wrap to the next line when there isn't enough space.</p>

        <h3>flex-wrap: nowrap (default — items shrink to fit)</h3>
        <div class="container wrap-nowrap">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
            <div class="item">Item 5</div>
            <div class="item">Item 6</div>
            <div class="item">Item 7</div>
            <div class="item">Item 8</div>
        </div>

        <h3>flex-wrap: wrap (items wrap to next line)</h3>
        <div class="container wrap-wrap">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
            <div class="item">Item 5</div>
            <div class="item">Item 6</div>
            <div class="item">Item 7</div>
            <div class="item">Item 8</div>
        </div>

        <div class="code-block">
            .container { flex-wrap: nowrap; }     /* Default — no wrapping */
            .container { flex-wrap: wrap; }       /* Items wrap */
            .container { flex-wrap: wrap-reverse; } /* Items wrap in reverse */
        </div>
    </section>

    <!-- ====== 4. FLEX-GROW ====== -->
    <section>
        <h2>4. flex-grow</h2>
        <p>Defines how much an item can grow relative to other items.</p>

        <div class="container grow-demo">
            <div class="item">flex-grow: 0 (default)</div>
            <div class="item grow-1">flex-grow: 1</div>
            <div class="item grow-2">flex-grow: 2</div>
        </div>

        <div class="code-block">
            .item { flex-grow: 0; }  /* Default — no growth */
            .item { flex-grow: 1; }  /* Grows to fill available space */
            .item { flex-grow: 2; }  /* Grows twice as much as flex-grow: 1 */
        </div>
    </section>

    <!-- ====== 5. JUSTIFY-CONTENT ====== -->
    <section>
        <h2>5. justify-content</h2>
        <p>Aligns items along the <strong>main axis</strong>.</p>

        <h3>flex-start (default)</h3>
        <div class="container justify-start">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>center</h3>
        <div class="container justify-center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>flex-end</h3>
        <div class="container justify-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>space-between</h3>
        <div class="container justify-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>space-around</h3>
        <div class="container justify-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>space-evenly</h3>
        <div class="container justify-evenly">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container { justify-content: flex-start; }    /* Default — start */
            .container { justify-content: flex-end; }      /* End */
            .container { justify-content: center; }        /* Center */
            .container { justify-content: space-between; } /* Space between */
            .container { justify-content: space-around; }  /* Space around */
            .container { justify-content: space-evenly; }  /* Equal space */
        </div>
    </section>

    <!-- ====== 6. ALIGN-ITEMS ====== -->
    <section>
        <h2>6. align-items</h2>
        <p>Aligns items along the <strong>cross axis</strong>.</p>

        <h3>flex-start</h3>
        <div class="container align-demo align-start">
            <div class="item">1</div>
            <div class="item" style="height: 80px;">2 (taller)</div>
            <div class="item">3</div>
        </div>

        <h3>center</h3>
        <div class="container align-demo align-center">
            <div class="item">1</div>
            <div class="item" style="height: 80px;">2 (taller)</div>
            <div class="item">3</div>
        </div>

        <h3>flex-end</h3>
        <div class="container align-demo align-end">
            <div class="item">1</div>
            <div class="item" style="height: 80px;">2 (taller)</div>
            <div class="item">3</div>
        </div>

        <h3>stretch (default)</h3>
        <div class="container align-demo align-stretch">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container { align-items: stretch; }     /* Default — fill height */
            .container { align-items: flex-start; }  /* Top */
            .container { align-items: flex-end; }    /* Bottom */
            .container { align-items: center; }      /* Center */
            .container { align-items: baseline; }    /* Text baseline */
        </div>
    </section>

    <!-- ====== 7. FLEX SHORTHAND ====== -->
    <section>
        <h2>7. flex (Shorthand)</h2>
        <p>Combines <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code>.</p>

        <div class="container">
            <div class="item" style="flex: 1;">flex: 1</div>
            <div class="item" style="flex: 2;">flex: 2</div>
            <div class="item" style="flex: 1;">flex: 1</div>
        </div>

        <div class="code-block">
            .item { flex: 1; }           /* grow: 1, shrink: 1, basis: 0 */
            .item { flex: auto; }        /* grow: 1, shrink: 1, basis: auto */
            .item { flex: none; }        /* grow: 0, shrink: 0, basis: auto */
            .item { flex: 1 0 200px; }   /* grow: 1, shrink: 0, basis: 200px */
        </div>
    </section>

    <!-- ====== 8. REFERENCE TABLES ====== -->
    <section>
        <h2>8. Reference Tables</h2>

        <h3>Container Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Values</th>
            </tr>
            <tr>
                <td><code>display</code></td>
                <td>Enables flexbox</td>
                <td><code>flex</code>, <code>inline-flex</code></td>
            </tr>
            <tr>
                <td><code>flex-direction</code></td>
                <td>Main axis direction</td>
                <td><code>row</code>, <code>column</code>, <code>row-reverse</code>, <code>column-reverse</code></td>
            </tr>
            <tr>
                <td><code>flex-wrap</code></td>
                <td>Wrapping behavior</td>
                <td><code>nowrap</code>, <code>wrap</code>, <code>wrap-reverse</code></td>
            </tr>
            <tr>
                <td><code>justify-content</code></td>
                <td>Align on main axis</td>
                <td><code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>space-between</code>, <code>space-around</code>, <code>space-evenly</code></td>
            </tr>
            <tr>
                <td><code>align-items</code></td>
                <td>Align on cross axis</td>
                <td><code>stretch</code>, <code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>baseline</code></td>
            </tr>
        </table>

        <h3>Item Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Default</th>
            </tr>
            <tr>
                <td><code>flex-grow</code></td>
                <td>How much an item can grow</td>
                <td><code>0</code></td>
            </tr>
            <tr>
                <td><code>flex-shrink</code></td>
                <td>How much an item can shrink</td>
                <td><code>1</code></td>
            </tr>
            <tr>
                <td><code>flex-basis</code></td>
                <td>Initial size</td>
                <td><code>auto</code></td>
            </tr>
            <tr>
                <td><code>flex</code></td>
                <td>Shorthand for grow, shrink, basis</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>order</code></td>
                <td>Visual order of items</td>
                <td><code>0</code></td>
            </tr>
            <tr>
                <td><code>align-self</code></td>
                <td>Override align-items for one item</td>
                <td><code>auto</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 9. BEST PRACTICES ====== -->
    <section>
        <h2>9. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>display: flex</code> for one-dimensional layouts</li>
                <li>Use <code>gap</code> instead of margins on flex items</li>
                <li>Use <code>justify-content</code> for main axis alignment</li>
                <li>Use <code>align-items</code> for cross axis alignment</li>
                <li>Use <code>flex-wrap: wrap</code> for responsive layouts</li>
                <li>Use the <code>flex</code> shorthand for concise code</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use Flexbox for two-dimensional layouts (use Grid instead)</li>
                <li>Don't use margins on flex items when gap works</li>
                <li>Don't forget that <code>align-items</code> only works on the cross axis</li>
                <li>Don't confuse <code>justify-content</code> (main axis) with <code>align-items</code> (cross axis)</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Applies To	Description
`display: flex`	Container	Enables flexbox
`flex-direction`	Container	Main axis (row/column)
`flex-wrap`	Container	Wrapping behavior
`justify-content`	Container	Align on main axis
`align-items`	Container	Align on cross axis
`flex-grow`	Item	Growth factor
`flex-shrink`	Item	Shrink factor
`flex-basis`	Item	Initial size
`flex`	Item	Shorthand for grow, shrink, basis

Main Axis vs Cross Axis

flex-direction	Main Axis	Cross Axis
`row` (default)	Horizontal →	Vertical ↓
`column`	Vertical ↓	Horizontal →
`row-reverse`	Horizontal ←	Vertical ↓
`column-reverse`	Vertical ↑	Horizontal →

Best Practices

✅ Do This:

/* Center everything perfectly */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Responsive flex with wrapping */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Equal-width items */
.item {
    flex: 1;
}

❌ Don’t Do This:

/* Don't use margins on flex items */
.item {
    margin-right: 20px; /* Use gap on the container instead */
}

/* Don't confuse justify-content and align-items */
.container {
    justify-content: center; /* Main axis */
    align-items: center;     /* Cross axis */
}

Pro Tip: Flexbox is perfect for one-dimensional layouts (rows or columns). Use display: flex on the container, then control alignment with justify-content (main axis) and align-items (cross axis). The flex: 1 shorthand makes items grow equally to fill available space. Remember: when you change flex-direction, the main and cross axes swap! In the next lessons, you’ll dive deeper into each Flexbox property.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!