Horizontal columns with FLEX

March 14, 2021

The fact is that quite often I come across the fact that even guys who are far from being new to sitebuilding cannot do it correctly without a bootstrap. This is especially true for fashionistas who rely in everything on “novelties” and ready-made solutions and back-end specialists. Moreover, among the backend we came across not just newbies, but really good specialists) So let’s get started:

Let’s say we want to make a row with 20px of column spacing. A common mistake is that everyone forgets that margins “adds” width to the block it is applied to. That is, when making a horizontal row with gaps, the column width is incorrectly set, doing it this way flex : 0 0 50%; max-width : 50%; margin : 0 10px; .

In case the task is to make a row with gaps of 20px, you need to do it like this flex : 0 0 calc(50% - 20px); max-width : calc(50% - 20px); margin : 0 10px; .

The second point is that many people often insert column content directly from the column itself, without adding a special container for the content. Technically, there is nothing wrong with this, and in simple cases it works.

But in practice, very often the column content is a very or not very complex building block that should respond to the hover, for example by showing additional content. Or even just highlighting the background in the form of some kind of picture.

In the latter case, if you apply the background to the column itself, it will take up the entire available width, in our case increased by 10px on the right and left ( if column’s element width was increased with padding property ) . Therefore, the standard version of building a series looks like this:

HTML

<div class="row-box">
    <div class="column-box">
        <div class="column-content">First Column Content</div>
    </div>
    <div class="column-box">
        <div class="column-content">Second Column Content</div>
    </div>
    <div class="column-box">
        <div class="column-content">Third Column Content</div>
    </div>
</div>

CSS

.row-box {
    display : flex; 
    flex-wrap : wrap; // to arrange columns by rows if it is needed, else columns will be arranged in one row
    margin : 0 -10px; // our columns has extra right and left width in 10px, wich padding produced, so edge columns will be placed width responsive offsets : -10px left for edge left columns and -10px right for edge right colunms.
}
.column-box { 
    flex : 0 0 calc(50% - 20px); // that is the trick with width;
    max-width : calc(50% - 20px;);
    margin: 10px; // top and bottom magins just for decoration purposes, but right and left ones does the job - they tretches column to produce a horizontal gaps
}
.column-content { 
    display : flex;
    justify-content : center;
    align-items : center;  // 3 rules for easy horizontal and vertical content centring.
    padding : 15px 0;
    background-color : #ccc;
}

Result

First Column Content
Second Column Content
Third Column Content

We can add that for elements .column-box to create horizontal spacing, you can use not margin, but padding, in this case like this:

.column-box { 
    flex : 0 0 calc(50% - 20px); // that is the trick with width;
    max-width : calc(50% - 20px;);
    margin: 10px 0; //right and left margin to zero
    padding : 0 10px // gaps by padding 
}

Categorised in: css, html

Categories