W3.CSS — Flexbox

Basic Flexbox

<div class="w3-row w3-flex w3-flex-wrap">
    <div class="w3-third w3-container">Item 1</div>
    <div class="w3-third w3-container">Item 2</div>
    <div class="w3-third w3-container">Item 3</div>
</div>

Flexbox Alignment

<!-- Center items -->
<div class="w3-row w3-flex w3-center">
    <div class="w3-third">Centered 1</div>
    <div class="w3-third">Centered 2</div>
    <div class="w3-third">Centered 3</div>
</div>

<!-- Right align -->
<div class="w3-row w3-flex w3-right-align">
    <div class="w3-third">Right 1</div>
    <div class="w3-third">Right 2</div>
</div>

<!-- Space between -->
<div class="w3-row w3-flex w3-between">
    <div class="w3-third">Space</div>
    <div class="w3-third">Between</div>
    <div class="w3-third">Items</div>
</div>

Flexbox Direction

<!-- Row direction -->
<div class="w3-row w3-flex w3-row">
    <div class="w3-third">Item 1</div>
    <div class="w3-third">Item 2</div>
    <div class="w3-third">Item 3</div>
</div>

<!-- Column direction -->
<div class="w3-flex w3-column">
    <div class="w3-padding">Item 1</div>
    <div class="w3-padding">Item 2</div>
    <div class="w3-padding">Item 3</div>
</div>

Flexbox Examples

<!-- Navbar -->
<div class="w3-bar w3-black">
    <div class="w3-bar-item w3-button">Home</div>
    <div class="w3-bar-item w3-button">About</div>
    <div class="w3-bar-item w3-button">Contact</div>
    <div class="w3-bar-item w3-button w3-right">Login</div>
</div>

<!-- Card grid -->
<div class="w3-row w3-flex w3-flex-wrap">
    <div class="w3-third w3-container w3-padding">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Card 1</h4>
            </div>
        </div>
    </div>
    <div class="w3-third w3-container w3-padding">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Card 2</h4>
            </div>
        </div>
    </div>
    <div class="w3-third w3-container w3-padding">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Card 3</h4>
            </div>
        </div>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic flexbox layout
2. Centers items in a flex container
3. Creates a navbar with flexbox
4. Builds a flex card grid

Up Next

Next: Learn about W3.CSS Navigation.