Горизонтальный ряд столбцов на FLEX

14 марта, 2021

Дело в том, что довольно часто сталкиваюсь с тем, что даже далеко не новички в сайтобилдинге ребята не могут правильно это сделать без бутстрапа. Особенно это касается модников, которые во всем полагаются на «новинки» и готовые решения и бекенд-специалистов. Причем среди бекендеров попадались не просто не новички, а по настоящему хорошие специалисты) Так что приступим:

Пусть нам нужно сделать горизонтальный ряд с промежутками в 20px между столбцами. Общая ошибка в том, что все забывают, что margin «добавляет» ширину к блоку, к которому он применен. То есть, когда делают горизонтальный ряд с промежутками, неправильно задают ширину столбца, делая это для двух столбцов таким образом flex : 0 0 50%; max-width : 50%;

В случае, если задача сделать ряд с промежутками в 20px, нужно делать вот так flex : 0 0 calc(50% - 20px); max-width : calc(50% - 20px); margin : 0 10px; .

Второй момент состоит в том, что многие часто вставляют контент столбца прямо с сам столбец, не добавляя специальный контейнер для контента. Технически здесь нет ничего плохого, и в простых случаях это работает.

Но на практике, очень часто контент столбца является очень или не очень сложным составным элементом, который должен по реагировать на хувер, например путем показа дополнительного контента. Или даже просто высвечиванием бекграунда в виде какой-нибудь картинки.

В последнем случае, если применить бэкграунд к самому столбцу, он займет всю доступную ширину, в нашем случае увеличенную на 10px справа и слева ( если ширина столбца была увеличена с помощью свойства padding ). Поэтому стандартный вариант построения горизонтального ряда выглядит так:

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

Можно добавить, что для элемента .column-box для добавления горизонтальных промежутков можно использовать не только margin, но и padding, как вот здесь:

.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