Всем привет! В этом материале рассмотрим, что такое flex-свойства сетки Bootstrap и как их использовать .
Всем привет! В этом материале рассмотрим, что такое flex-свойства сетки Bootstrap и как их использовать.
В прошлых статьях мы четко задавали, сколько колонок должно быть в ряду, однако, если мы этого указывать не будем, будут использованы flex-свойства сетки Bootstrap, и она автоматически все разместит, как надо. Давайте посмотрим несколько примеров:
<div class="row" style="background: lightblue">
<div class="col-md">col-md</div>
<div class="col-md">col-md</div>
<div class="col-md">col-md</div>
</div>
Здесь у нас 3 ряда, каждый из которых будет размером в 4 колонки. Т.к. мы не указываем точную ширину, то сетка сделает нужные расчеты за нас и приведет все колонки к одному размеру. Рассмотрим другой пример:
<div class="row" style="background: lightblue">
<div class="col-md">col-md</div>
<div class="col-md-8">col-md-8</div>
<div class="col-md">col-md</div>
</div>
Здесь мы указали ширину только для одного ряда, следовательно, остальные будут высчитаны автоматически и будут равными друг другу.
Теперь поговорим о том, что будет, если мы не будем использовать всю сетку, а только ее часть?
<div class="row">
<div class="col-md-2">col-md</div>
<div class="col-md-2">col-md</div>
<div class="col-md-2">col-md</div>
</div>
Здесь общая ширина 3 рядов будет равна 6 колонкам. Они автоматически будут выравнены слева. Т.е. левая часть(половина сетки) будет занята, а правая – нет. Однако что, если мы хотим выравнять эти ряды по центру или справа? Для этого также есть нужные классы:
<div class="row justify-content-md-center">
<div class="col-md">col-md</div>
<div class="col-md">col-md</div>
<div class="col-md">col-md</div>
</div>
Таким образом мы можем выравнять наше содержимое по центру. Если вы хотите выравнять его по правому краю, используйте класс justify-content-md-end.
Рассмотрим теперь, как мы можем упорядочивать наши ряды. Это делается очень просто, т.к. для этого также есть необходимые классы:
<div class="row justify-content-md-center">
<div class="col-md-2 flex-last">1 col-md-2</div>
<div class="col-md-2 flex-first">2 col-md-2</div>
<div class="col-md-2">3 col-md-2</div>
</div>
Теперь блок с классом flex-first будет первым, затем будет идти блок без класса, а потом блок с классом flex-last. Все очень просто!
А на этом сегодня все. Спасибо за внимание!
