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
