Flexbox Techniques You Need to Know About

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).

If a regular layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. Please have a look at this figure from the specification, explaining the main idea behind the flex layout.

Here are some techniques we think may come in handy.

Creating Fully Responsive Grids

Most developers rely on CSS frameworks when creating responsive grids. Bootstrap is the most popular one but there are hundreds of libraries that can help you with this task. They usually work well and have tons of options, but tend to be quite heavy. If you are a DIY person or don’t want to implement a whole framework just for the grid, flexbox has you covered!

A row in the flexbox grid is simply a container with display:flex. The horizontal columns inside it can be any amount of elements, setting the size of which is done via flex. The flex model adapts to the viewport size, so this setup should look fine on all devices. However, if we decide there isn’t enough space horizontally on the screen, we can easily turn the layout into a vertical one with a media-query.


<div class="container">

    <!-- This column will be 25% wide -->
    
<div class="col-1">...</div>


    <!-- This column will be 50% wide -->
    
<div class="col-2">...</div>


    <!-- This column will be 25% wide -->
    
<div class="col-1">...</div>


</div>

.container{
display: flex;
}

/* Classes for each column size. */

.col-1{
flex: 1;
}

.col-2{
flex: 2;
}

@media (max-width: 800px){
.container{
/* Turn the horizontal layout into a vertical one. */
flex-direction: column;
}
}

Reordering Elements

A while ago, if we had to dynamically change the order of some elements, we would probably try some CSS hack, quit in frustration, and go do it with JavaScript. With flexbox, however, this task comes down to applying a single CSS property.

It’s called order and just like its name everything about it as straightforward as possible.


<div class="container">

    <!-- These items will appear in reverse order -->

    
<div class="blue">...</div>

    
<div class="red">...</div>

    
<div class="green">...</div>


</div>

.container{
    display: flex;
}

/* Reverse the order of elements */

.blue{
    order: 3;
}

.red{
    order: 2;
}

.green{
    order: 1;
}

Horizontal And Vertical Centering

Flexbox offers an easier solution to the problem. Every flex layout has two directions (X axis and Y axis) and two separate properties for their alignment. By centering both we can position any element right in the middle of its parent container.


<div class="container">

    <!-- Any element placed here will be centered both horizontally and vertically -->

    
<div>...</div>


</div>

.container{
    display: flex;

    /* Center according to the main axis */
    justify-content: center;

    /* Center according to the secondary axis */
        align-items: center;
}

Leave a reply


0 comments

SUBSCRIBE TO OUR NEWSLETTER