Bootstrap 4. Flexbox

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.


<div class="container">
  <div class="row">
    <div class="col item">
      Половинка
    </div>
    <div class="col item">
      Половинка
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      Одна треть
    </div>
    <div class="col item">
      Одна треть
    </div>
    <div class="col item">
      Одна треть
    </div>
  </div>
</div>
Половинка
Половинка
Одна треть
Одна треть
Одна треть

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока. Остальные распределятся поровну.


<div class="container">
  <div class="row">
    <div class="col item">
      (12 - 6) / 2 = 3
    </div>
    <div class="col-6 item">
      6 колонок
    </div>
    <div class="col item">
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      
    </div>
    <div class="col-5 item">
      5 колонок
    </div>
    <div class="col item">
      
    </div>
  </div>
  
  <div class="row">
    <div class="col item">
      
    </div>
    <div class="col-4 item">
      4 колонки
    </div>
    <div class="col item">
      
    </div>
  </div>
</div>
(12 - 6) / 2 = 3
6 колонок
(12 - 6) / 2 = 3
5 колонок
4 колонки

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.


<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Слово
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>

  <div class="row justify-content-md-start">
    <div class="col col-lg-2 item">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Два слова
    </div>
    <div class="col col-lg-2 item">
      3 of 3
    </div>
  </div>
  
    <div class="row justify-content-md-end">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Здесь три слова
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
1 of 3
Слово
3 of 3
1 of 3
Два слова
3 of 3
1 of 3
Здесь три слова
3 of 3

Можно оставить стандартное поведение, не сжимая общую ширину.

1 of 3
Два слова
3 of 3 

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Два слова
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

col
col
col
col
col-8
col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Из стопки в ряд

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

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

.col .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col col-md-8">.col .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

По верху
По верху
По верху
По центру
По центру
По центру
По низу
По низу
По низу 

<div class="container">
  <div class="row align-items-start color_containter">
    <div class="col item">
      По верху
    </div>
    <div class="col item">
      По верху
    </div>
    <div class="col item">
      По верху
    </div>
  </div>
  <div class="row align-items-center color_containter">
    <div class="col item">
      По центру
    </div>
    <div class="col item">
      По центру
    </div>
    <div class="col item">
      По центру
    </div>
  </div>
  <div class="row align-items-end color_containter">
    <div class="col item">
      По низу
    </div>
    <div class="col item">
      По низу
    </div>
    <div class="col item">
      По низу
    </div>
  </div>
</div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

One of three columns
One of three columns
One of three columns 

<div class="container">
  <div class="row color_containter">
    <div class="col align-self-start item">
      One of three columns
    </div>
    <div class="col align-self-center item">
      One of three columns
    </div>
    <div class="col align-self-end item">
      One of three columns
    </div>
  </div>
</div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

По левому краю
По левому краю
По центру
По центру
По правому краю
По правому краю
Around
Around
Between
Between 

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      По левому краю
    </div>
    <div class="col-4">
      По левому краю
    </div>
  </div>
  
  <div class="row justify-content-center">
    <div class="col-4">
      По центру
    </div>
    <div class="col-4">
      По центру
    </div>
  </div>
  
  <div class="row justify-content-end">
    <div class="col-4">
      По правому краю
    </div>
    <div class="col-4">
      По правому краю
    </div>
  </div>
  
  <div class="row justify-content-around">
    <div class="col-4">
      Around
    </div>
    <div class="col-4">
      Around
    </div>
  </div>
  
  <div class="row justify-content-between">
    <div class="col-4">
      Between
    </div>
    <div class="col-4">
      Between
    </div>
  </div>
</div>

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

.col-12 .col-sm-6 .col-md-8 no-gutters
.col-6 .col-md-4
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

  • .flex-first – отображается первым
  • .flex-last – отображается последним
  • .flex-unordered – отображается между первым и последним
Первый, но не первый и не последний
Второй, но последний
Третий, но первый 

<div class="container">
  <div class="row">
    <div class="col flex-unordered">
      Первый, но не первый и не последний
    </div>
    <div class="col flex-last">
      Второй, но последний
    </div>
    <div class="col flex-first">
      Третий, но первый
    </div>
  </div>
</div>

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4 item">.col-md-4</div>
    <div class="col-md-4 offset-md-4 item">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3 item">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3 item">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
   <div class="col-md-6 offset-md-3 item">.col-md-6 .offset-md-3</div>
  </div>
</div>
Реклама