CSS 25 💻 flex-direction and flex-wrap properties - KandZ

These two container properties control the direction of the main axis and how items wrap when they exceed the container’s size. Together, they form the foundation of any Flexbox layout.

Overview of Properties

Property	Description	Values
`flex-direction`	Sets the direction of the main axis	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Controls whether items wrap	`nowrap`, `wrap`, `wrap-reverse`

1. flex-direction

The flex-direction property sets the direction of the main axis — which determines how items are laid out.

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

Values

Value	Main Axis	Direction	Visual
`row`	Horizontal	Left → Right (default)	`[ 1 ] [ 2 ] [ 3 ]`
`row-reverse`	Horizontal	Right → Left	`[ 3 ] [ 2 ] [ 1 ]`
`column`	Vertical	Top → Bottom	`[ 1 ]` `[ 2 ]` `[ 3 ]`
`column-reverse`	Vertical	Bottom → Top	`[ 3 ]` `[ 2 ]` `[ 1 ]`

Important: Changing flex-direction also changes which axis is the main axis and which is the cross axis.

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

2. flex-wrap

The flex-wrap property controls whether flex items wrap to the next line when they exceed the container’s size.

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

Values

Value	Description	Visual
`nowrap`	All items on one line (default) — items shrink to fit	`[ 1 ][ 2 ][ 3 ][ 4 ][ 5 ]`
`wrap`	Items wrap to multiple lines	`[ 1 ][ 2 ][ 3 ]` `[ 4 ][ 5 ]`
`wrap-reverse`	Items wrap in reverse order (bottom to top)	`[ 4 ][ 5 ]` `[ 1 ][ 2 ][ 3 ]`

Key Points:

nowrap forces all items onto a single line (items may shrink)
wrap allows items to flow onto multiple lines
wrap-reverse inverts the cross-axis direction (lines stack in reverse)

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-direction and flex-wrap</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;
            border: 2px solid #333;
            width: 200px;
            margin: 10px 0;
            padding: 5px;
            background: #e9ecef;
            border-radius: 8px;
        }

        .item {
            width: 100px;
            height: 50px;
            background: #007bff;
            margin: 5px;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 4px;
            font-weight: bold;
            flex-shrink: 0;
        }

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

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

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

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

        .dir-column {
            flex-direction: column;
            width: auto;
            min-width: 200px;
            min-height: 200px;
        }

        .dir-column-reverse {
            flex-direction: column-reverse;
            width: auto;
            min-width: 200px;
            min-height: 200px;
        }

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

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

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

        /* Wider container for wrap demos */
        .container-wide {
            width: 350px;
        }

        .container-wide .item {
            width: 100px;
        }

        /* Side-by-side comparison */
        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .comparison-item {
            text-align: center;
        }

        .comparison-item h4 {
            margin-bottom: 5px;
            color: #007bff;
        }

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

        .axis-demo .main-axis-label {
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            font-weight: bold;
            color: #dc3545;
            white-space: nowrap;
        }

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

    <h1>flex-direction and flex-wrap Properties</h1>

    <!-- ====== 1. FLEX-DIRECTION: ROW ====== -->
    <section>
        <h2>1. flex-direction: row (default)</h2>
        <p>Main axis is horizontal, items flow from left to right.</p>

        <div class="container dir-row axis-demo">
            <span class="main-axis-label">← Main Axis →</span>
            <span class="cross-axis-label">↕ Cross</span>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container {
                display: flex;
                flex-direction: row;  /* Default */
            }
        </div>
    </section>

    <!-- ====== 2. FLEX-DIRECTION: ROW-REVERSE ====== -->
    <section>
        <h2>2. flex-direction: row-reverse</h2>
        <p>Main axis is horizontal, but items flow from right to left.</p>

        <div class="container dir-row-reverse axis-demo">
            <span class="main-axis-label">← Main Axis →</span>
            <span class="cross-axis-label">↕ Cross</span>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container {
                display: flex;
                flex-direction: row-reverse;
            }
        </div>
    </section>

    <!-- ====== 3. FLEX-DIRECTION: COLUMN ====== -->
    <section>
        <h2>3. flex-direction: column</h2>
        <p>Main axis is vertical, items flow from top to bottom.</p>

        <div class="container dir-column axis-demo">
            <span class="main-axis-label">↓ Main Axis ↓</span>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container {
                display: flex;
                flex-direction: column;
            }
        </div>
    </section>

    <!-- ====== 4. FLEX-DIRECTION: COLUMN-REVERSE ====== -->
    <section>
        <h2>4. flex-direction: column-reverse</h2>
        <p>Main axis is vertical, but items flow from bottom to top.</p>

        <div class="container dir-column-reverse axis-demo">
            <span class="main-axis-label">↑ Main Axis ↑</span>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            .container {
                display: flex;
                flex-direction: column-reverse;
            }
        </div>
    </section>

    <!-- ====== 5. FLEX-WRAP: NOWRAP ====== -->
    <section>
        <h2>5. flex-wrap: nowrap (default)</h2>
        <p>All items are forced onto a single line. If they don't fit, they overflow or shrink.</p>

        <div class="container container-wide wrap-nowrap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        <p class="note">Items overflow the container because they don't wrap.</p>

        <div class="code-block">
            .container {
                display: flex;
                flex-wrap: nowrap;  /* Default */
            }
        </div>
    </section>

    <!-- ====== 6. FLEX-WRAP: WRAP ====== -->
    <section>
        <h2>6. flex-wrap: wrap</h2>
        <p>Items wrap to multiple lines when they exceed the container's size.</p>

        <div class="container container-wide wrap-wrap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        <p class="note">Items wrap onto new lines when there's not enough space.</p>

        <div class="code-block">
            .container {
                display: flex;
                flex-wrap: wrap;
            }
        </div>
    </section>

    <!-- ====== 7. FLEX-WRAP: WRAP-REVERSE ====== -->
    <section>
        <h2>7. flex-wrap: wrap-reverse</h2>
        <p>Items wrap, but the lines are stacked in reverse order (bottom to top).</p>

        <div class="container container-wide wrap-wrap-reverse">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        <p class="note">The first line is at the bottom, the second line is at the top.</p>

        <div class="code-block">
            .container {
                display: flex;
                flex-wrap: wrap-reverse;
            }
        </div>
    </section>

    <!-- ====== 8. SIDE-BY-SIDE COMPARISON ====== -->
    <section>
        <h2>8. Side-by-Side Comparison</h2>

        <h3>flex-direction</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>row</h4>
                <div class="container" style="flex-direction: row;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>row-reverse</h4>
                <div class="container" style="flex-direction: row-reverse;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>column</h4>
                <div class="container" style="flex-direction: column; width: auto; min-width: 150px;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>column-reverse</h4>
                <div class="container" style="flex-direction: column-reverse; width: auto; min-width: 150px;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
            </div>
        </div>

        <h3 style="margin-top: 30px;">flex-wrap</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>nowrap</h4>
                <div class="container container-wide" style="flex-wrap: nowrap; width: 100%;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>wrap</h4>
                <div class="container container-wide" style="flex-wrap: wrap; width: 100%;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>wrap-reverse</h4>
                <div class="container container-wide" style="flex-wrap: wrap-reverse; width: 100%;">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                </div>
            </div>
        </div>
    </section>

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

        <h3>flex-direction Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Main Axis</th>
                <th>Direction</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>row</code></td>
                <td>Horizontal</td>
                <td>Left → Right (default)</td>
                <td><code>[1 ] [2 ] [3 ]</code></td>
            </tr>
            <tr>
                <td><code>row-reverse</code></td>
                <td>Horizontal</td>
                <td>Right → Left</td>
                <td><code>[3 ] [2 ] [1 ]</code></td>
            </tr>
            <tr>
                <td><code>column</code></td>
                <td>Vertical</td>
                <td>Top → Bottom</td>
                <td><code>[1 ]</code><br><code>[2 ]</code><br><code>[3 ]</code></td>
            </tr>
            <tr>
                <td><code>column-reverse</code></td>
                <td>Vertical</td>
                <td>Bottom → Top</td>
                <td><code>[3 ]</code><br><code>[2 ]</code><br><code>[1 ]</code></td>
            </tr>
        </table>

        <h3>flex-wrap Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Visual</th>
            </tr>
            <tr>
                <td><code>nowrap</code></td>
                <td>All items on one line (default)</td>
                <td><code>[1 ][2 ][3 ][4 ][5 ]</code></td>
            </tr>
            <tr>
                <td><code>wrap</code></td>
                <td>Items wrap to multiple lines</td>
                <td><code>[1 ][2 ][3 ]</code><br><code>[4 ][5 ]</code></td>
            </tr>
            <tr>
                <td><code>wrap-reverse</code></td>
                <td>Items wrap in reverse order (bottom to top)</td>
                <td><code>[4 ][5 ]</code><br><code>[1 ][2 ][3 ]</code></td>
            </tr>
        </table>

        <h3>Shorthand: flex-flow</h3>
        <table class="reference-table">
            <tr>
                <th>Shorthand</th>
                <th>Equivalent</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>flex-flow</code></td>
                <td><code>flex-direction</code> + <code>flex-wrap</code></td>
                <td><code>flex-flow: row wrap;</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 10. BEST PRACTICES ====== -->
    <section>
        <h2>10. 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>flex-direction: row</code> for horizontal layouts</li>
                <li>Use <code>flex-direction: column</code> for vertical layouts</li>
                <li>Use <code>flex-wrap: wrap</code> for responsive layouts</li>
                <li>Use <code>flex-flow</code> shorthand to combine both properties</li>
                <li>Remember that changing <code>flex-direction</code> swaps the main and cross axes</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 <code>flex-wrap: wrap-reverse</code> without understanding the visual order change</li>
                <li>Don't forget that <code>justify-content</code> and <code>align-items</code> swap axes when you change <code>flex-direction</code></li>
                <li>Don't use <code>nowrap</code> when items might overflow on small screens</li>
                <li>Don't confuse <code>row-reverse</code> (visual order) with <code>order</code> (DOM order)</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Values	Description
`flex-direction`	`row`, `row-reverse`, `column`, `column-reverse`	Sets the main axis direction
`flex-wrap`	`nowrap`, `wrap`, `wrap-reverse`	Controls wrapping behavior
`flex-flow`	`<flex-direction> <flex-wrap>`	Shorthand for both

flex-direction Values

Value	Main Axis	Direction
`row`	Horizontal	Left → Right (default)
`row-reverse`	Horizontal	Right → Left
`column`	Vertical	Top → Bottom
`column-reverse`	Vertical	Bottom → Top

flex-wrap Values

Value	Description
`nowrap`	All items on one line (default)
`wrap`	Items wrap to multiple lines
`wrap-reverse`	Items wrap in reverse order (bottom to top)

flex-flow Shorthand

/* Instead of: */
flex-direction: row;
flex-wrap: wrap;

/* Use: */
flex-flow: row wrap;

Best Practices

✅ Do This:

/* Responsive flex layout */
.container {
    display: flex;
    flex-flow: row wrap;  /* Shorthand */
    gap: 20px;
}

/* Vertical layout */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

❌ Don’t Do This:

/* Don't use wrap-reverse without understanding it */
.container {
    flex-wrap: wrap-reverse; /* Lines stack from bottom to top */
}

/* Don't forget axis swap when changing direction */
.container {
    flex-direction: column;
    justify-content: center; /* Now controls vertical alignment! */
    align-items: center;     /* Now controls horizontal alignment! */
}

Pro Tip: flex-direction and flex-wrap are the two most fundamental Flexbox properties. Use flex-flow: row wrap as a shorthand for responsive layouts. Remember that changing flex-direction swaps the main and cross axes — which means justify-content and align-items swap their effects too! This is a common source of confusion for beginners.

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!

Overview of Properties

1. flex-direction

Values

2. flex-wrap

Values

Complete Example

Quick Reference

flex-direction Values

flex-wrap Values

flex-flow Shorthand

Best Practices

Ads Blocker Detected!!!