Flexbox Examples

Example 1

A Flexible Layout has a parent element styled with display: flex. Direct child elements of the flex container automatically become flex items.

CSS

.flex-container {
    display: flex;
    background-color: indianred;
}

.flex-container > div {
    background-color: powderblue;
    margin: 10px;
    padding: 20px 100px 20px 100px;
    font-size: 30px;
}

HTML


<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Example 2

Unequal content

Potato Soup

Dill

Yes, to dance beneath the diamond sky with one hand waving free Silhouetted by the sea, circled by the circus sands With all memory and fate driven deep beneath the waves Let me forget about today until tomorrow

CSS

.flex-container3 {
    display: flex;
    background-color: indianred;
}

.flex-container3 > div {
    background-color: powderblue;
    margin: 10px;
    padding: 5px;
}

HTML


<div class="flex-container">
    <div>Potato Soup</div>
    <div>Dill</div>
    <div>Yes, to dance beneath...</div>
</div>

Example 3

Flex container is styled with: flex-direction: column

CSS

    .flex-container4 {
        display: flex;
        flex-direction: column;
        background-color: indianred;
    }
    
    .flex-container4 > div {
        background-color: powderblue;
        margin: 10px;
        padding: 20px 100px 20px 100px;
        font-size: 30px;
    }

HTML


    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>