CSS 28 💻 justify-content and align-items properties - KandZ

These two properties are the alignment powerhouses of Flexbox. They control how items are distributed and aligned within a flex container along the main and cross axes.

Overview of Properties

Property	Axis	Description
`justify-content`	Main axis	Distributes extra space between/around items
`align-items`	Cross axis	Aligns items within the container

1. justify-content

The justify-content property specifies how extra space is distributed between and around items along the main axis.

.container {
    display: flex;
    justify-content: space-between;
}

Values

Value	Description	Visual
`flex-start`	Items packed at the start (default)	`[ 1 ][ 2 ][ 3 ]__________`
`flex-end`	Items packed at the end	`__________[ 1 ][ 2 ][ 3 ]`
`center`	Items centered	`_____[ 1 ][ 2 ][ 3 ]_____`
`space-between`	First at start, last at end, equal space between	`[ 1 ]___[ 2 ]___[ 3 ]`
`space-around`	Equal space around each item	`_[ 1 ]__[ 2 ]__[ 3 ]_`
`space-evenly`	Equal space everywhere	`__[ 1 ]__[ 2 ]__[ 3 ]__`
`stretch`	Items stretch to fill space	`[ 1 ][ 2 ][ 3 ]` (stretched)

Visual Comparison

flex-start:        [1][2][3]__________
flex-end:          __________[1][2][3]
center:            _____[1][2][3]_____
space-between:     [1]___[2]___[3]
space-around:      _[1]__[2]__[3]_
space-evenly:      __[1]__[2]__[3]__

Key Difference:

space-between — no space at the edges
space-around — half space at the edges
space-evenly — equal space everywhere

2. align-items

The align-items property specifies how items are aligned along the cross axis.

.container {
    display: flex;
    align-items: center;
}

Values

Value	Description	Visual
`stretch`	Items stretch to fill the container height (default)	Items fill height
`flex-start`	Items aligned to the top	`[ 1 ][ 2 ][ 3 ]`
`flex-end`	Items aligned to the bottom	`[ 1 ][ 2 ][ 3 ]`
`center`	Items centered vertically	`[ 1 ][ 2 ][ 3 ]`
`baseline`	Items aligned to their text baseline	Text baselines align
`start`	Logical start of cross axis	Same as flex-start (for LTR)
`end`	Logical end of cross axis	Same as flex-end (for LTR)

Visual Comparison

stretch:      [1][2][3]  (tall items)
flex-start:   [1][2][3]

flex-end:     
              [1][2][3]
center:       
              [1][2][3]

baseline:     [1][2][3]  (text baselines align)

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content and align-items Properties</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;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

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

        .container-tall {
            min-height: 150px;
        }

        .item {
            background: #007bff;
            color: white;
            padding: 15px 20px;
            margin: 5px;
            border: 2px dashed #0056b3;
            border-radius: 6px;
            font-weight: bold;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .item:nth-child(3n) {
            background: #6c5ce7;
            border-color: #4a2a9e;
        }

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

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

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

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

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

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

        /* align-items demos */
        .ai-start {
            align-items: flex-start;
        }

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

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

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

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

        .ai-stretch .item {
            padding: 10px;
        }

        /* Baseline demo items */
        .baseline-item-1 {
            font-size: 14px;
            padding: 5px 15px;
        }

        .baseline-item-2 {
            font-size: 28px;
            padding: 5px 15px;
        }

        .baseline-item-3 {
            font-size: 20px;
            padding: 5px 15px;
        }

        .baseline-item-4 {
            font-size: 16px;
            padding: 5px 15px;
        }

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

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

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

        .comparison-item .container {
            margin: 5px 0;
        }

        /* Visual explanation */
        .visual-explanation {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin: 20px 0;
        }

        .visual-row {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 600px;
        }

        .visual-label {
            font-weight: bold;
            color: #007bff;
            min-width: 130px;
            text-align: right;
            font-size: 0.85rem;
        }

        .visual-bar {
            flex: 1;
            height: 40px;
            background: #e9ecef;
            border-radius: 6px;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 5px;
            border: 1px solid #ddd;
        }

        .visual-bar .dot {
            width: 30px;
            height: 30px;
            background: #007bff;
            border-radius: 4px;
            margin: 0 3px;
        }

        .visual-bar .dot:nth-child(even) {
            background: #28a745;
        }

        .visual-bar .dot:nth-child(3n) {
            background: #6c5ce7;
        }
    </style>
</head>
<body>

    <h1>justify-content and align-items Properties</h1>

    <!-- ====== 1. JUSTIFY-CONTENT ====== -->
    <section>
        <h2>1. justify-content</h2>
        <p>Distributes extra space between and around items along the <strong>main axis</strong>.</p>

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

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

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

        <h3>space-between</h3>
        <div class="container jc-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <p class="note">First item at start, last item at end, equal space between.</p>

        <h3>space-around</h3>
        <div class="container jc-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <p class="note">Equal space around each item. Half space at the edges.</p>

        <h3>space-evenly</h3>
        <div class="container jc-evenly">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <p class="note">Equal space everywhere — between items and at the edges.</p>

        <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>

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

        <h3>flex-start</h3>
        <div class="container container-tall ai-start">
            <div class="item">1</div>
            <div class="item" style="padding: 30px 20px;">2 (taller)</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>flex-end</h3>
        <div class="container container-tall ai-end">
            <div class="item">1</div>
            <div class="item" style="padding: 30px 20px;">2 (taller)</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>center</h3>
        <div class="container container-tall ai-center">
            <div class="item">1</div>
            <div class="item" style="padding: 30px 20px;">2 (taller)</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h3>baseline</h3>
        <div class="container container-tall ai-baseline">
            <div class="item baseline-item-1">Small</div>
            <div class="item baseline-item-2">LARGE</div>
            <div class="item baseline-item-3">Medium</div>
            <div class="item baseline-item-4">Normal</div>
        </div>
        <p class="note">Items align to their text baselines, regardless of font size.</p>

        <h3>stretch (default)</h3>
        <div class="container container-tall ai-stretch">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <p class="note">Items stretch to fill the container's height.</p>

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

    <!-- ====== 3. COMBINING BOTH ====== -->
    <section>
        <h2>3. Combining justify-content and align-items</h2>
        <p>Use both properties together for perfect alignment.</p>

        <h3>Perfect Centering: justify-content: center + align-items: center</h3>
        <div class="container container-tall" style="justify-content: center; align-items: center;">
            <div class="item" style="padding: 30px 40px;">Centered</div>
        </div>

        <h3>Space Between + Center</h3>
        <div class="container container-tall" style="justify-content: space-between; align-items: center;">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h3>Space Evenly + Flex-End</h3>
        <div class="container container-tall" style="justify-content: space-evenly; align-items: flex-end;">
            <div class="item">1</div>
            <div class="item" style="padding: 25px 20px;">2</div>
            <div class="item">3</div>
        </div>

        <div class="code-block">
            /* Perfect centering */
            .container {
                display: flex;
                justify-content: center;  /* Main axis */
                align-items: center;      /* Cross axis */
            }

            /* Space between + center */
            .container {
                justify-content: space-between;
                align-items: center;
            }

            /* Space evenly + flex-end */
            .container {
                justify-content: space-evenly;
                align-items: flex-end;
            }
        </div>
    </section>

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

        <h3>justify-content</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>flex-start</h4>
                <div class="container jc-start" style="min-height: 60px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>center</h4>
                <div class="container jc-center" style="min-height: 60px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>space-between</h4>
                <div class="container jc-between" style="min-height: 60px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>space-around</h4>
                <div class="container jc-around" style="min-height: 60px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>space-evenly</h4>
                <div class="container jc-evenly" style="min-height: 60px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
        </div>

        <h3 style="margin-top: 30px;">align-items</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>flex-start</h4>
                <div class="container ai-start" style="min-height: 100px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 20px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>center</h4>
                <div class="container ai-center" style="min-height: 100px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 20px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>flex-end</h4>
                <div class="container ai-end" style="min-height: 100px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 20px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
            <div class="comparison-item">
                <h4>stretch</h4>
                <div class="container ai-stretch" style="min-height: 100px;">
                    <div class="item" style="padding: 5px 10px;">1</div>
                    <div class="item" style="padding: 5px 10px;">2</div>
                    <div class="item" style="padding: 5px 10px;">3</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ====== 5. VISUAL EXPLANATION ====== -->
    <section>
        <h2>5. Visual Explanation</h2>
        <p>See how different <code>justify-content</code> values distribute space.</p>

        <div class="visual-explanation">
            <div class="visual-row">
                <div class="visual-label">flex-start:</div>
                <div class="visual-bar" style="justify-content: flex-start;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="visual-row">
                <div class="visual-label">flex-end:</div>
                <div class="visual-bar" style="justify-content: flex-end;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="visual-row">
                <div class="visual-label">center:</div>
                <div class="visual-bar" style="justify-content: center;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="visual-row">
                <div class="visual-label">space-between:</div>
                <div class="visual-bar" style="justify-content: space-between;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="visual-row">
                <div class="visual-label">space-around:</div>
                <div class="visual-bar" style="justify-content: space-around;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="visual-row">
                <div class="visual-label">space-evenly:</div>
                <div class="visual-bar" style="justify-content: space-evenly;">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </section>

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

        <h3>justify-content Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Space at Edges</th>
            </tr>
            <tr>
                <td><code>flex-start</code></td>
                <td>Items packed at start (default)</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>flex-end</code></td>
                <td>Items packed at end</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>center</code></td>
                <td>Items centered</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>space-between</code></td>
                <td>Equal space between items</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>space-around</code></td>
                <td>Equal space around items</td>
                <td>Half space</td>
            </tr>
            <tr>
                <td><code>space-evenly</code></td>
                <td>Equal space everywhere</td>
                <td>Full space</td>
            </tr>
            <tr>
                <td><code>stretch</code></td>
                <td>Items stretch to fill space</td>
                <td>—</td>
            </tr>
        </table>

        <h3>align-items Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>stretch</code></td>
                <td>Items stretch to fill container (default)</td>
            </tr>
            <tr>
                <td><code>flex-start</code> / <code>start</code></td>
                <td>Items aligned to the start</td>
            </tr>
            <tr>
                <td><code>flex-end</code> / <code>end</code></td>
                <td>Items aligned to the end</td>
            </tr>
            <tr>
                <td><code>center</code></td>
                <td>Items centered</td>
            </tr>
            <tr>
                <td><code>baseline</code></td>
                <td>Items aligned to text baseline</td>
            </tr>
        </table>

        <h3>Common Combinations</h3>
        <table class="reference-table">
            <tr>
                <th>Combination</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td><code>justify-content: center;<br>align-items: center;</code></td>
                <td>Perfect centering</td>
            </tr>
            <tr>
                <td><code>justify-content: space-between;<br>align-items: center;</code></td>
                <td>Items spread out, vertically centered</td>
            </tr>
            <tr>
                <td><code>justify-content: center;<br>align-items: flex-end;</code></td>
                <td>Horizontally centered, aligned to bottom</td>
            </tr>
        </table>
    </section>

    <!-- ====== 7. BEST PRACTICES ====== -->
    <section>
        <h2>7. 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>justify-content: center; align-items: center;</code> for perfect centering</li>
                <li>Use <code>space-between</code> for navigation bars and toolbars</li>
                <li>Use <code>space-evenly</code> for evenly distributed items</li>
                <li>Use <code>align-items: baseline</code> for text of different sizes</li>
                <li>Remember that <code>justify-content</code> works on the main axis and <code>align-items</code> on the cross axis</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 confuse <code>justify-content</code> (main axis) with <code>align-items</code> (cross axis)</li>
                <li>Don't forget that the axes swap when you change <code>flex-direction</code></li>
                <li>Don't use <code>space-between</code> when you need space at the edges</li>
                <li>Don't use <code>align-items</code> on a single item (use <code>align-self</code> instead)</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Axis	Values
`justify-content`	Main axis	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`
`align-items`	Cross axis	`stretch`, `flex-start`, `flex-end`, `center`, `baseline`

Space Distribution Comparison

Value	Space Between Items	Space at Edges
`flex-start`	None	All at end
`flex-end`	None	All at start
`center`	None	Equal at both ends
`space-between`	Equal	None
`space-around`	Equal	Half space
`space-evenly`	Equal	Full space

Best Practices

✅ Do This:

/* Perfect centering */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation bar */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Evenly distributed items */
.toolbar {
    display: flex;
    justify-content: space-evenly;
}

/* Baseline alignment for mixed font sizes */
.baseline-demo {
    display: flex;
    align-items: baseline;
}

❌ Don’t Do This:

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

/* Don't forget axes swap with flex-direction */
.container {
    flex-direction: column;
    justify-content: center; /* Now controls VERTICAL alignment */
    align-items: center;     /* Now controls HORIZONTAL alignment */
}

/* Don't use align-items for single item */
.item {
    align-items: center; /* Invalid — use align-self */
}

Pro Tip: The combination justify-content: center; align-items: center; is the classic “perfect centering” trick that works in both Flexbox and Grid. Remember: justify-content works on the main axis (controlled by flex-direction), while align-items works on the cross axis. When you change flex-direction to column, these two properties swap their visual effects — justify-content now controls vertical alignment, and align-items controls horizontal alignment!

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. justify-content

Values

Visual Comparison

2. align-items

Values

Visual Comparison

Complete Example

Quick Reference

Space Distribution Comparison

Best Practices

Ads Blocker Detected!!!