Бортовой журнал Ктулху

Как сделать flex в Bootstrap 3

Flexbox можно назвать удачной попыткой решения огромного количества проблем при верстке, таких, например, как выравнивание блоков по вертикали. Любой верстальщик знает несколько путей выровнять что-либо по вертикали или сделать 3-х колоночный макет с резиновой средней колонкой. Но все эти способы довольно странные, похожи на хак костыли, подходят не во всех случаях, сложны для восприятия и не работают при несоблюдении определенных магических условий, которые сложились исторически и вообще, это не проще обряда вызова Сатаны.

Но недавно я нашел одно готовое решение, превращающее Bootstrap 3 в нечто флексоподобное и близкое к 4.

screenshot 2018 04 03 12 53 32

screenshot 2018 04 03 12 53 44

<div class="row">
 <div class="col-xs-12
 col-sm-8
 col-md-6
 col-lg-4">
 <div class="box">Responsive</div>
 </div>
</div>

Используя такую разметку, блоки станут флексовыми и будут выравниваться даже в шестимерном пространстве верхом на сферическом коне в вакууме.

Примеры: flexboxgrid.com

Скачать: github.com