CSS Flexbox в Bootstrap 4

В этой статье вы узнаете о том, как работает CSS Flexbox в таком мощном фреймворке, как Bootstrap 4. Да, эти свойства можно прописывать и в самом CSS, что делает процесс разработки более гибким, придавая больше возможностей, но всё же это Bootstrap и бывают моменты, когда знание того, как можно в нём применять CSS Flexbox на уровне классов, даёт вам много преимуществ и значительно экономит время.

Это предпоследняя статья из серии CSS Flexbox, скоро всё будет систематизировано и добавлено в одну большую статью с пояснениями.

Частичный перевод статьи Introduction To Bootstrap 4 Flex Layout (Flexbox for Bootstrap)

Классы d-flex и flex-row

В первом примере мы рассмотрим такие классы из Bootstrap 4, как d-flex и flex-row:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Используя два эти класса, мы создаем flex контейнер, который выставляет все элементы в один ряд.

Результат в браузере должен выглядеть примерно так:

Классы d-flex, flex-row-reverse

Измените класс flex-row на класс flex-row-reverse:

<div class="d-flex flex-row-reverse my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Результат станет таким:

Классы justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between

Дальше мы поговорим о классах justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between. Если мы применяем эти классы флекс строке, то мы таким образом выравниваем контент горизонтально. Если же мы применяем эти классы флекс колонке, то мы выравниваем контент вертикально.

Применяя justify-content-start на примере выше:

<div class="d-flex flex-row justify-content-start my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Мы получим:

Применяем justify-content-center:

<div class="d-flex flex-row justify-content-center my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Как результат:

Теперь применяем justify-content-end:

<div class="d-flex flex-row justify-content-end my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Как результат, получаем:

Теперь смотрим, что будет если применить класс justify-content-around:

<div class="d-flex flex-row justify-content-around my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Получаем:

А с justify-content-between:

<div class="d-flex flex-row justify-content-between my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Получаем:

Классы flex-column и flex-column-reverse

Теперь давайте сменим строчный flex на колоночный, применив класс flex-column:

<div class="d-flex flex-column my-flex-container-column">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Теперь все флекс элементы отображаются в одну колонку:

А ещё, мы можем поменять порядок расстановки элементов в колонке, применив класс flex-column-reverse:

<div class="d-flex flex-column-reverse my-flex-container-column">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Как результат, мы получим:

Классы ALIGN-items-start, align-items-center, align-items-end

Ну а теперь, давайте вернемся к флекс контейнеру со строчной раскладкой и посмотрим на то, как бы мы смогли вертикально выравнивать элементы в контейнере, применяя такие удобные классы, как align-items-start, align-items-center и align-items-end.

Для начала, давайте посмотрим на то, что же произойдет если мы применим класс align-items-start:

<div class="d-flex flex-row align-items-start my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

А произойдет вот что:

Меняем на align-items-center:

<div class="d-flex flex-row align-items-center my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Получаем:

И под конец, используем класс align-items-end:

<div class="d-flex flex-row align-items-end my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

И получаем:

Если эти классы применить к колоночной раскладке, то выравниванием будет сделано горизонтально.

Используем классы align-self-start, align-self-center, align-self-end

Есть классы в CSS Bootstrap 4, которые можно применить к одиночному флекс элементу: align-selft-start, align-selft-center и align-self-end.

В этом примере, align-self-start применяется ко второму флекс элементу, высота которого в два раза меньше, чем высота первого и второго:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item-2">1</div>
<div class="p-2 align-self-start my-flex-item">2</div>
<div class="p-2 my-flex-item-2">3</div>
</div>

Как результат:

Теперь применяем align-self-center:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item-2">1</div>
<div class="p-2 align-self-center my-flex-item">2</div>
<div class="p-2 my-flex-item-2">3</div>
</div>

И получаем:

А с align-self-end, получаем вот что:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item-2">1</div>
<div class="p-2 align-self-end my-flex-item">2</div>
<div class="p-2 my-flex-item-2">3</div>
</div>

Результат:

Обёртывание flex элементов

Обёртывание флекс элементов может контролироваться также применением CSS классов. Давайте сначала посмотрим на дефолтный враппинг без применения специальных классов:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
<div class="p-2 my-flex-item">4</div>
<div class="p-2 my-flex-item">5</div>
<div class="p-2 my-flex-item">6</div>
<div class="p-2 my-flex-item">7</div>
<div class="p-2 my-flex-item">8</div>
<div class="p-2 my-flex-item">9</div>
<div class="p-2 my-flex-item">10</div>
<div class="p-2 my-flex-item">11</div>
<div class="p-2 my-flex-item">12</div>
<div class="p-2 my-flex-item">13</div>
<div class="p-2 my-flex-item">14</div>
<div class="p-2 my-flex-item">15</div>
<div class="p-2 my-flex-item">16</div>
<div class="p-2 my-flex-item">17</div>
<div class="p-2 my-flex-item">18</div>
<div class="p-2 my-flex-item">19</div>
<div class="p-2 my-flex-item">20</div>
</div>

В результате мы видим, что никакого врапинга не происходит. Элементы выходят за пределы доступного места в флекс контейнере:

Добавляем класс flex-wrap:

<div class="d-flex flex-row flex-wrap my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
<div class="p-2 my-flex-item">4</div>
<div class="p-2 my-flex-item">5</div>
<div class="p-2 my-flex-item">6</div>
<div class="p-2 my-flex-item">7</div>
<div class="p-2 my-flex-item">8</div>
<div class="p-2 my-flex-item">9</div>
<div class="p-2 my-flex-item">10</div>
<div class="p-2 my-flex-item">11</div>
<div class="p-2 my-flex-item">12</div>
<div class="p-2 my-flex-item">13</div>
<div class="p-2 my-flex-item">14</div>
<div class="p-2 my-flex-item">15</div>
<div class="p-2 my-flex-item">16</div>
<div class="p-2 my-flex-item">17</div>
<div class="p-2 my-flex-item">18</div>
<div class="p-2 my-flex-item">19</div>
<div class="p-2 my-flex-item">20</div>
</div>

Теперь результат меняется. Врапинг работает и флекс элементы, которые не помещаются в первую строку, автоматически ставятся во вторую:

Ещё можно использовать flex-wrap-reverse:

<div class="d-flex flex-row flex-wrap-reverse my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
<div class="p-2 my-flex-item">4</div>
<div class="p-2 my-flex-item">5</div>
<div class="p-2 my-flex-item">6</div>
<div class="p-2 my-flex-item">7</div>
<div class="p-2 my-flex-item">8</div>
<div class="p-2 my-flex-item">9</div>
<div class="p-2 my-flex-item">10</div>
<div class="p-2 my-flex-item">11</div>
<div class="p-2 my-flex-item">12</div>
<div class="p-2 my-flex-item">13</div>
<div class="p-2 my-flex-item">14</div>
<div class="p-2 my-flex-item">15</div>
<div class="p-2 my-flex-item">16</div>
<div class="p-2 my-flex-item">17</div>
<div class="p-2 my-flex-item">18</div>
<div class="p-2 my-flex-item">19</div>
<div class="p-2 my-flex-item">20</div>
</div>

Тогда мы получим вот такой эффект:

Order

Ещё вы можете выставить порядок отображения флекс элементу, используя CSS класс order-[x], как в следующем примере:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 order-3 my-flex-item">1</div>
<div class="p-2 order-1 my-flex-item">2</div>
<div class="p-2 order-2 my-flex-item">3</div>
</div>

В результате вы увидите, что второй элемент показывается на месте первого, так как у него стоит класс order-1:

Auto Margin’ы

Ещё одна вещь, которая может применяться к единичным flex элементам это внешние отступы. Тут можно поиграться с такими классами:

mr-auto: добавляет внешний отступ с правой стороны элемента.

ml-auto: добавляет внешний отступ с левой стороны элемента.

mt-auto: добавляет внешний отступ сверху

mb-auto: добавляет внешний отступ снизу

Давайте снова прибегнем к строчному флекс примеру и применим класс mr-auto для первого элемента:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 mr-auto my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Результат теперь должны выглядеть так:

А применение mt-auto, приведет к такому:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 mt-auto my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>

Вариации адаптивности

Вы можете использовать адаптивные вариации для всех классов Bootstrap 4, таким образом, что эти классы будут применены только на соответствующих размерах экранов:

<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item-2">1</div>
<div class="p-2 align-self-sd-start align-self-md-center align-self-lg-end my-flex-item">2</div>
<div class="p-2 my-flex-item-2">3</div>
</div>

Применение align-self-lg-end для второго элемента на больших экранах:

Применение align-self-md-center для того же элемента, но только на экранах среднего размера:

align-self-sd-start для маленьких экранов:

Больше про Bootstrap 4 вы можете прочитать в следующих статьях:

Сетка в Bootstrap 4. Подробное руководство

Самые полезные хитрости в Bootstrap

Узнаем Bootstrap 4 за 30 минут, создавая лендинг

Делаем первый сайт на Bootstrap 4