CSS Flex

Sometimes when developing websites, we cannot use frameworks such as Bootstrap to style our pages. If you ever run into this situation, you can use CSS Flex.

In this blog, I will show you seven examples of how to layout pages using CSS flex.

These will be:

  • Columns
  • Rows
  • Reverse Rows
  • Centre
  • Space Evenly
  • Align Centre
  • Stretch

CSS flex-direction: column

.flex-container-column {
    display: flex;
    flex-direction: column;
    border: 1px solid #fd7e14;
    background-color: #ced4da;
    width: 100%;
    height: 300px;
}

The above code will display the following, notice how we have flex-direction: column:

flex items

Flex-direction: row

.flex-container-row {
    display: flex;
    flex-direction: row;
    border: 1px solid #fd7e14;
    width: 100%;
    height: 300px;
}

This time we use flex-direction: row.

flex-direction row

Flex-direction: row-reverse

We can also reverse the direction of the flex items with the following code:

.flex-container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid red;
    width: 100%;
    height: 300px;
}

The above will display the following using flex-direction: row-reverse.

flex-direction row reverse
Justify-content: center
.flex-container-centre {
    display: flex;
    justify-content: center;
    border: 1px solid #fd7e14;
    background-color: #ced4da;
    width: 100%;
    height: 300px;
}

The above code uses justify-content: center and displays the following.

flex center
Justify-content: space-evenly
.flex-container-space-evenly {
    display: flex;
    justify-content: space-evenly;
    border: 1px solid #fd7e14;
    background-color: #ced4da;
    width: 100%;
    height: 300px;
}

The above code uses justify-content: space-evenly and displays the following.

Flex Space Evenly
Align-items: center
.flex-container-align-centre {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid #fd7e14;
    background-color: #ced4da;
    width: 100%;
    height: 300px;
}

The above code uses align-items:center and displays the following.

flex align center
Align-items: stretch
.flex-container-align-stretch {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    border: 1px solid #fd7e14;
    background-color: #ced4da;
    width: 100%;
    height: 300px;
}

The above code uses align-items: stretch and displays the following.

flex align-item: stretch

The HTML for all the code examples can be seen below and you can download the full example at Github:

<div class="parent">
    <h2>CSS Flex Examples</h2>
   
            <p>Columns</p>
            <div class="flex-container-column">
                <div class="inner-container">Column 1</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3</div>
                <div class="inner-container">Column 4</div>
            </div>
            <hr />
            <p>Rows</p>
            <div class="flex-container-row">
                <div class="inner-container">Column 1</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3</div>
                <div class="inner-container">Column 4</div>
            </div>
            <hr />
            <p>Reverse Rows</p>
            <div class="flex-container-row-reverse">
                <div class="inner-container">Column 1</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3</div>
                <div class="inner-container">Column 4</div>
            </div>
            <p>Centre</p>
            <div class="flex-container-centre">
                <div class="inner-container">Column 1</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3</div>
            </div>
            <hr />
            <p>Space evenly</p>
            <div class="flex-container-space-evenly">
                <div class="inner-container">Column 1</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3</div>
            </div>
            <hr />
            <p>Align Centre</p>
            <div class="flex-container-align-centre">
                <div class="inner-container">Column 1 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
            </div>
            <hr />
            <p>Strech</p>
            <div class="flex-container-align-stretch">
                <div class="inner-container">Column 1 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
                <div class="inner-container">Column 2</div>
                <div class="inner-container">Column 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
        </div>