Class d flex что это

Bootstrap 4 — Классы для работы с flexbox

Основное назначение flex классов Bootstrap — это удобное и быстрое создание flex-контейнеров, а также адаптивное (на всех контрольных точках) управление раскладкой flex-элементов внутри них.

Flexbox – это CSS технология, которая предназначена для создания гибких макетов сайтов и веб-приложений. Она является неотъемлемой частью Bootstrap 4 и положена в работу не только сетки, но и его компонентов. Более подробно ознакомиться с CSS Flexbox можно в этой статье.

Создание flex-контейнера

Для того чтобы в Bootstrap 4 некоторый элемент на странице сделать flex-контейнером к нему необходимо добавить класс d-flex или d-inline-flex . После этого все дочерние элементы flex-контейнера (дети) автоматически станут flex-элементами.

Первый класс ( d-flex ) используется, когда flex-контейнер необходимо представить по отношению к окружающим его элементам (neighbor, соседям) блочным (block). А второй класс ( d-inline-flex ) применяется тогда, когда его нужно представить строчным (inline).

Если вам нужно сделать элемент flex-контейнером, только начиная с определённых контрольных точек, то используйте следующие классы

• d-sm-flex
• d-sm-inline-flex
• d-md-flex
• d-md-inline-flex
• d-lg-flex
• d-lg-inline-flex
• d-xl-flex
• d-xl-inline-flex

Расположение flex-элементов во flex-контейнере

Выкладывание flex-элементов во flex-контейнере осуществляется линиями.

Направление расположения элементов в пределах линии определяется главной осью. По умолчанию она направлена горизонтально слева направо ( flex-direction: row ).

Тем не менее, бывают ситуации, когда вам необходимо установить это явно. Для этого к flex-контейнеру необходимо добавить класс flex-row .

Задание обратного порядка следования flex-элементов во flex-контейнере осуществляется посредством установления главной оси направления справа налево ( flex-direction: row-reverse ). В Bootstrap 4 это действие осуществляется с помощью класса flex-row-reverse .

Изменение направления основной оси с горизонтального на вертикальное во flex-контейнере осуществляется с помощью класса flex-column или flex-column-reverse . Последний класс отличается от первого тем, что ось будет направлена не сверху вниз ( flex-direction: column ), а снизу вверх ( flex-direction: column-reverse ).

Расположение flex-элементов на нескольких линиях

По умолчанию flex-элементы во flex-контейнере располагаются на одной линии, даже если им не хватает места. Если при каких-то обстоятельствах это необходимо установить явно, то к flex-контейнеру необходимо добавить Bootstrap класс flex-nowrap .

Разрешить перенос flex-элементов но новые линии в Bootstrap 4 осуществляется посредством добавления к flex-контейнеру класса flex-wrap или flex-wrap-reverse .

Данные классы определяют направление поперечной оси, и, следовательно, то, как flex-элементы будут выкладываться во flex-контейнере.

Направление главной оси	Направление поперечной оси
flex-row (слева направо)	flex-wrap (сверху вниз)
	flex-wrap-reverse (снизу вверх)
flex-row-reverse (справа налево)	flex-wrap (сверху вниз)
	flex-wrap-reverse (снизу вверх)
flex-column (сверху вниз)	flex-wrap (слева направо)
	flex-wrap-reverse (справа налево)
flex-column-reverse (снизу вверх)	flex-wrap (слева направо)
	flex-wrap-reverse (справа налево)

Выравнивание flex-элементов

Выравнивание элементов во flex-контейнере можно осуществлять по 2 направлениям (главной и поперечной осям).

Выравнивание flex-элементов в направлении главной оси

Выравнивание flex-элементов во flex-контейнере вдоль направления основной оси осуществляется посредством класса justify-content{-breakpoint}-? .

В данном классе следует заменить:

• breakpoint на название контрольной точки, начиная с которой будет применяться указанное выравнивание (без обозначения — начиная с самых крохотных устройств);
• ? на направление выравнивания: start (по умолчанию), end , center , between или around .

Добавлять класс justify-content{-breakpoint}-? необходимо к flex-контейнеру.

Список всех классов justify-content:

• justify-content-start , justify-content-end , justify-content-center , justify-content-between , justify-content-around ;
• justify-content-sm-start , justify-content-sm-end , justify-content-sm-center , justify-content-sm-between , justify-content-sm-around ;
• justify-content-md-start , justify-content-md-end , justify-content-md-center , justify-content-md-between , justify-content-md-around ;
• justify-content-lg-start , justify-content-lg-end , justify-content-lg-center , justify-content-lg-between , justify-content-lg-around ;
• justify-content-xl-start , justify-content-xl-end , justify-content-xl-center , justify-content-xl-between , justify-content-xl-around .

Например, выровняем flex-элементы в направлении главной оси на всех устройствах по центру.

Например, выровняем flex-элементы внутри flex-контейнера на контрольных точках xs и sm равномерно (between), на md и lg по центру, а на xl относительно конца оси.

 
1
 
2
 
3
 

Выравнивание flex-элементов в направлении поперечной оси

Выравнивание flex-элементов относительно линии в направлении поперечной оси осуществляется с помощью класса align-items{-breakpoint}-? .

В данном классе нужно вместо:

• breakpoint указать название контрольной точки, начиная с которой будет применяться указанное выравнивание (без обозначения — начиная с самых крохотных устройств).
• ? ввести направление выравнивания: start , end , center , baseline или stretch (по умолчанию).

Применять класс align-items{-breakpoint}-? необходимо к flex-контейнеру.

Список всех классов align-items:

• align-items-start , align-items-end , align-items-center , align-items-baseline , align-items-stretch ;
• align-items-sm-start , align-items-sm-end , align-items-sm-center , align-items-sm-baseline , align-items-sm-stretch ;
• align-items-md-start , align-items-md-end , align-items-md-center , align-items-md-baseline , align-items-md-stretch ;
• align-items-lg-start , align-items-lg-end , align-items-lg-center , align-items-lg-baseline , align-items-lg-stretch ;
• align-items-xl-start , align-items-xl-end , align-items-xl-center , align-items-xl-baseline , align-items-xl-stretch .

Например, выровняем flex-элементы (в направлении поперечной оси) на контрольных точках xs , sm и md относительно конца (end) линии, а на lg и xl по центру.

 
1
 
2
 
3
 
4
 
5
 
6
 

Изменение выравнивания конкретно выбранного flex-элемента

Выравнивание некоторого (определённого) flex-элемента относительно линии в направлении поперечной оси осуществляется с помощью класса align-items{-breakpoint}-? .

В данном классе нужно вместо:

• breakpoint указать название контрольной точки, начиная с которой будет применяться указанное выравнивание к flex-элементу (без обозначения — начиная с самых крохотных устройств).
• ? указать направление выравнивания: start , end , center , baseline или stretch (по умолчанию).

Применять класс align-self{-breakpoint}-? необходимо к flex-элементам.

Список всех классов align-self:

• align-self-start , align-self-end , align-self-center , align-self-baseline , align-self-stretch ;
• align-self-sm-start , align-self-sm-end , align-self-sm-center , align-self-sm-baseline , align-self-sm-stretch ;
• align-self-md-start , align-self-md-end , align-self-md-center , align-self-md-baseline , align-self-md-stretch ;
• align-self-lg-start , align-self-lg-end , align-self-lg-center , align-self-lg-baseline , align-self-lg-stretch ;
• align-self-xl-start , align-self-xl-end , align-self-xl-center , align-self-xl-baseline , align-self-xl-stretch .

Например, выровняем первый flex-элемент в направлении поперечной оси (в пределах линии) относительно начала оси, а последний — относительно конца оси.

 
1
 
2
 
3
 

Выравнивание линий flex-контейнера

Выравнивание линий во flex-контейнере (в направлении поперечной оси) осуществляется с помощью класса align-content{-breakpoint}-? .

В данном классе необходимо вместо:

• breakpoint указать название контрольной точки, начиная с которой будет действовать данное выравнивание (без обозначения — начиная с самых крохотных устройств).
• ? направление выравнивания: start , end , center , between , around или stretch (по умолчанию)

Применять класс align-content{-breakpoint}-? необходимо к flex-контейнерам.

Список всех классов align-content*:

• align-content-start , align-content-end , align-content-center , align-content-around , align-content-stretch ;
• align-content-sm-start , align-content-sm-end , align-content-sm-center , align-content-sm-around , align-content-sm-stretch ;
• align-content-md-start , align-content-md-end , align-content-md-center , align-content-md-around , align-content-md-stretch ;
• align-content-lg-start , align-content-lg-end , align-content-lg-center , align-content-lg-around , align-content-lg-stretch ;
• align-content-xl-start , align-content-xl-end , align-content-xl-center , align-content-xl-around , align-content-xl-stretch .

Например, расположим линии flex-контейнера на маленьких устройствах ( xs , sm , md ) относительно начала поперечной оси, а на больших устройствах ( lg , xl ) по центру.

 
1-1
 
1-2
 
1-3
 
2-1
 
2-2
 
2-3
 

Смещение адаптивных блоков с помощью margin

Во Flexbox можно получить удивительные вещи, если смешать flex-выравнивание с auto margin.

Например, рассмотрим, как во Flexbox можно очень просто расположить одни flex-элементы слева, а другие справа.

  
1
 
2
 
3
 
  
1
 
2
 
3
 

Аналогичным способом, можно одни flex-элементы поместить сверху, а другие снизу.

  
1
 
2
 
3
 
  
1
 
2
 
3
 

Изменение порядка следования элементов во flex-контейнере

Изменение визуального порядка следования flex-элементов во flex-контейнере осуществляется с помощью класса order{-breakpoint}-? .

В данном классе необходимо вместо:

• breakpoint указать название контрольной точки, начиная с которой будет применяться CSS-свойство для упорядочивания flex-элементов (без обозначения — начиная с самых крохотных устройств).
• ? задать число от 1 до 12. Это число является порядковым номером элемента во flex-контейнере.

Например, необходимо чтобы flex-элементы на маленьких устройствах следовали 1->2->3, на больших устройствах 1->3->2.

 
1
 
2
 
3
 

Flex-утилиты для построения адаптивного макета на Bootstrap 4

Адаптивная сетка Bootstrap 4 построена на основе модели Flexbox. Основой для использования адаптивных классов является класс row в качестве родительского контейнера для нескольких классов типа col-префих-цифра . Для класса row задано свойство display: flex , а дочерние элементы делят его пространство в соответствии с префиксом и цифрой на равные части, но для разных разрешений экрана.
Например,

.row+.col-sm-4*3
< h3 >col — sm — 4 < / h3 >
< p >Lorem ipsum dolor sit amet , consectetur adipisicing elit . Debitis dolorem ,
aliquam temporibus numquam quos eaque rem omnis a eligendi ut ? < / p >
< h3 >col — sm — 4 < / h3 >
< p >Inventore deleniti minus , accusantium harum iste vel blanditiis quis ,
ad perspiciatis error quas impedit quidem aperiam veritatis temporibus libero nobis . < / p >
< h3 >col — sm — 4 < / h3 >
< p >Voluptatum itaque amet , voluptates maiores autem reiciendis voluptatem ,
reprehenderit eum earum nisi ratione sunt sed aut quod rem , officia cum ! < / p >

CSS-свойства для классов, использованных в примере, представлены на скриншотах ниже.

Однако, есть еще масса утилит, которые вы можете использовать как внутри классов row или col-. , так и самостоятельно.

Flex-утилиты

Блоки с display: flex

У класса row помимо свойства display: flex есть еще 2 свойства, связанных с компенсацией правого и левого отступа внутри класса container(container-fluid) . Это margin-left и margin-right в 15px . За счет этих отрицательных внешних отступов не стоит использовать класс row вне класса container или container-fluid , css-свойства которых таковы:

Для того чтобы назначить какому-либо блоку css-свойство display: flex , используйте класс .d-flex или один из «отзывчивых» вариантов ( .d-sm-flex , .d-md-flex , .d-lg-flex или .d-xl-flex ). В случае, если для элемента нужно свойство display: inline-flex в Bootstrap4 предусмотрены класс .d-inline-flex и его разновидности .d-sm-inline-flex , .d-md-inline-flex , .d-lg-inline-flex или .d-xl-inline-flex .

Направление внутри flex-блоков

Как известно, по умолчанию все flexbox-контейнеры имеют направление вдоль главной оси (свойство flex-direction: row). Вы можете изменять направление с помощью таких классов Bootstrap-4:

• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

К каждому из перечисленных классов могут быть добавлены адаптивные приставки -sm-, -md-, -lg-, -xl-. Например, можно использовать класс .flex-sm-row или .flex-md-column , или .flex-lg-row-reverse , или .flex-xl-column-reverse и подобные.

Выравнивание содержимого внутри flexbox-контейнера

Наверняка вам пригодятся утилиты, связанные с css-свойством justify-content для flexbox-контейнеров, чтобы изменять выравнивания flex-элементов по главной оси (горизонтальная ось X по умолчанию и вертикальная ось Y, если flex-direction: column ). Классы, предоставляемые css-файлами Bootstrap-4 предлагают на выбор варианты суффиксов start (умолчание браузера), end , center , between или around :

• .justify-content-start , .justify-content-sm-start , .justify-content-md-start , .justify-content-lg-start , .justify-content-xl-start
• .justify-content-end , .justify-content-sm-end , .justify-content-md-end , .justify-content-lg-end , .justify-content-xl-end
• .justify-content-center, .justify-content-sm-center , .justify-content-md-center , .justify-content-lg-center , .justify-content-xl-center
• .justify-content-between , .justify-content-sm-between , .justify-content-md-between , .justify-content-lg-between , .justify-content-xl-between
• .justify-content-around , .justify-content-sm-around , .justify-content-md-around , .justify-content-lg-around , .justify-content-xl-around

Сложно сказать, какой из них вы выберете для своей верстки, но думается, что самыми популярными будут классы .justify-content-center , .justify-content-between , и .justify-content-around , т.к. чаще всего приходится либо центрировать контент, либо распределять несколько блоков по ширине родительского элемента.

Перенос блоков с помощью свойства flex-wrap

Для flex-контейнера можно выбрать класс для переноса дочерних блоков, не помещающихся по ширине контейнера на следующую строку ( .flex-wrap ). Если нужно изменить порядок отображения блоков при переносе, то нужен класс .flex-wrap-reverse . По умолчанию перенос не выполняется, но если вам это нужно указать явно, используйте класс .flex-nowrap . Как и для других классов, использование переносов возможно только для определенных разрешений экрана с отзывчивыми утилитами:

• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Рассмотрим реальный пример, в котором внутри родительского контейнера нужно разместить 4 квадратных блока с небольшим количеством информации в каждом, причем при изменении ширины экрана они должны перестроиться в 2 столбца (планшет) или 1 столбец (телефон).

Для реализации этого примера были использованы классы .d-flex , .justify-content-around и .flex-wrap для разделения блоков равными промежутками и переноса их на новую строку при уменьшении ширины контейнера. На вкладке HTML можно посмотреть разметку, а вкладка CSS содержит код стилей.

Выравнивание элементов внутри flex-контейнера заданной высоты

Если высота flex-контейнера больше, чем размер вложенных в нее блоков, вы можете использовать flex-утилиты, основанные на свойстве align-items для изменения выравнивания дочерних элементов по перекрестной оси (ось Y по умолчанию ( flex-direction: row ) и ось X, если задано свойство flex-direction: column ). Названия классов основаны на названии самого свойства+его значение: stretch (идет по умолчанию), start , end , center , baseline .

Основные классы:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch

Классы с префиксами:

• .align-items-sm-start , .align-items-md-start , .align-items-lg-start , .align-items-xl-start
• .align-items-sm-end , .align-items-md-end , .align-items-lg-end , .align-items-xl-end
• .align-items-sm-center , .align-items-md-center , .align-items-lg-center , .align-items-xl-center
• .align-items-sm-baseline , .align-items-md-baseline , .align-items-lg-baseline , .align-items-xl-baseline
• .align-items-sm-stretch , .align-items-md-stretch , .align-items-lg-stretch , .align-items-xl-stretch

Довольно часто выравнивание различного типа необходимо использовать в верхней части страницы — в теге или в различных слайдерах.

Пример, размещенный ниже, интересен тем, что для формирования блоков заголовочной части сайта использованы такие классы, как .justify-content-between и .align-items-end . В блоках с текстом, размещенных внутри основного flex-контейнера использован класс .align-items-center , позволяющий центрировать элементы друг относительно друга. Переключайте вкладки HTML и CSS, чтобы посмотреть разметку и стилевые правила.

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

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

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch

Как и у других классов, здесь можно применить отзывчивые префиксы, чтобы получить класс, работающий на одном или нескольких разрешениях экрана:

• .align-self-(sm, md, lg, xl)-start
• .align-self-(sm, md, lg, xl)-end
• .align-self-(sm, md, lg, xl)-center
• .align-self-(sm, md, lg, xl)-baseline
• .align-self-(sm, md, lg, xl)-stretch

Надеюсь, вы понимаете, что префикс должен быть только один — либо -sm- , либо -md- , либо -lg- , либо -xl- , указывать все через запятую нельзя.

В примере ниже блоки с классом .team-member внутри flex-контейнера с минимальной высотой в 600px расположены «лесенкой» за счет использования таких классов, как .align-self-md-start , align-self-md-center и .align-self-md-end . За счет этого первый блок размещается вверху контейнера, второй — посередине, а третий — внизу. Поскольку каждому из этих блоков задано свойство max-width: 30% , a при уменьшении ширины экрана их высота выравнивается и приближается к высоте родительского контейнера, использован класс с приставкой -md- . Также у родительского элемента были добавлены рассмотренные ранее класс .justify-content-sm-between для распределения дочерних блоков внутри него с одинаковыми промежутками между ними, и класс .flex-wrap для переноса блоков на маленьких экранах при отмене значения max-width :

Flex

Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора адаптивных утилит flexbox. Для более сложных реализаций может потребоваться собственный CSS.

Содержание

Включить гибкое поведение

Примените display утилиты для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных гибких свойств.

Я контейнер Flexbox!

div class="d-flex p-2 bd-highlight">I'm a flexbox container!div>

Я встроенный контейнер Flexbox!

div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!div>

Адаптивные варианты также существуют для .d-flex и .d-inline-flex .

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex
• .d-xxl-flex
• .d-xxl-inline-flex

Направление

Задайте направление гибких элементов в гибком контейнере с помощью утилит направления. В большинстве случаев вы можете опустить горизонтальный класс здесь, поскольку это значение по умолчанию для браузера row . Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).

Используется .flex-row для установки горизонтального направления (по умолчанию в браузере) или .flex-row-reverse для начала горизонтального направления с противоположной стороны.

Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3

div class="d-flex flex-row bd-highlight mb-3"> div class="p-2 bd-highlight">Flex item 1div> div class="p-2 bd-highlight">Flex item 2div> div class="p-2 bd-highlight">Flex item 3div> div> div class="d-flex flex-row-reverse bd-highlight"> div class="p-2 bd-highlight">Flex item 1div> div class="p-2 bd-highlight">Flex item 2div> div class="p-2 bd-highlight">Flex item 3div> div>

Используется .flex-column для установки вертикального направления или .flex-column-reverse для начала вертикального направления с противоположной стороны.

Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3

div class="d-flex flex-column bd-highlight mb-3"> div class="p-2 bd-highlight">Flex item 1div> div class="p-2 bd-highlight">Flex item 2div> div class="p-2 bd-highlight">Flex item 3div> div> div class="d-flex flex-column-reverse bd-highlight"> div class="p-2 bd-highlight">Flex item 1div> div class="p-2 bd-highlight">Flex item 2div> div class="p-2 bd-highlight">Flex item 3div> div>

Адаптивные варианты также существуют для flex-direction .

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

Justify content

Используйте justify-content служебные программы на контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: column ). Выберите из start (браузера по умолчанию), end , center , between , around , или evenly .

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex justify-content-start">. div> div class="d-flex justify-content-end">. div> div class="d-flex justify-content-center">. div> div class="d-flex justify-content-between">. div> div class="d-flex justify-content-around">. div> div class="d-flex justify-content-evenly">. div>

Адаптивные варианты также существуют для justify-content .

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-sm-evenly
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-md-evenly
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-lg-evenly
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around
• .justify-content-xl-evenly
• .justify-content-xxl-start
• .justify-content-xxl-end
• .justify-content-xxl-center
• .justify-content-xxl-between
• .justify-content-xxl-around
• .justify-content-xxl-evenly

Align items

Используйте align-items служебные программы в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y в начале, ось X, если flex-direction: column ). Выберите из start , end , center , baseline , или stretch (браузер по умолчанию).

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex align-items-start">. div> div class="d-flex align-items-end">. div> div class="d-flex align-items-center">. div> div class="d-flex align-items-baseline">. div> div class="d-flex align-items-stretch">. div>

Адаптивные варианты также существуют для align-items .

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

Align self

Используйте align-self служебные программы для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите один из вариантов , как же align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex

div class="align-self-start">Aligned flex itemdiv> div class="align-self-end">Aligned flex itemdiv> div class="align-self-center">Aligned flex itemdiv> div class="align-self-baseline">Aligned flex itemdiv> div class="align-self-stretch">Aligned flex itemdiv>

Адаптивные варианты также существуют для align-self .

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-stretch

Fill

Используйте .flex-fill класс для серии элементов-братьев, чтобы заставить их иметь ширину, равную их содержимому (или равную ширину, если их содержимое не превышает их границы), занимая при этом все доступное горизонтальное пространство.

Гибкий элемент с большим количеством контента
Элемент Flex
Элемент Flex

div class="d-flex bd-highlight"> div class="p-2 flex-fill bd-highlight">Flex item with a lot of contentdiv> div class="p-2 flex-fill bd-highlight">Flex itemdiv> div class="p-2 flex-fill bd-highlight">Flex itemdiv> div>

Адаптивные варианты также существуют для flex-fill .

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Grow и shrink

Используйте .flex-grow-* утилиты для переключения способности гибкого элемента увеличиваться, чтобы заполнить доступное пространство. В приведенном ниже примере .flex-grow-1 элементы используют все доступное пространство, в то время как оставшимся двум гибким элементам предоставляется необходимое пространство.

Элемент Flex
Элемент Flex
Третий гибкий элемент

div class="d-flex bd-highlight"> div class="p-2 flex-grow-1 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Third flex itemdiv> div>

Используйте .flex-shrink-* утилиты для переключения возможности гибкого элемента сжиматься при необходимости. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить больше места для предыдущего гибкого элемента с .w-100 .

Элемент Flex
Элемент Flex

div class="d-flex bd-highlight"> div class="p-2 w-100 bd-highlight">Flex itemdiv> div class="p-2 flex-shrink-1 bd-highlight">Flex itemdiv> div>

Адаптивные варианты также существуют для flex-grow и flex-shrink .

Авто margin

Flexbox может делать несколько замечательных вещей, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), перемещение двух элементов вправо ( .mr-auto ) и перемещение двух элементов влево ( .ml-auto ).

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex bd-highlight mb-3"> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div> div class="d-flex bd-highlight mb-3"> div class="mr-auto p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div> div class="d-flex bd-highlight mb-3"> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="ml-auto p-2 bd-highlight">Flex itemdiv> div>

With align-items

Вертикально переместить один гибкий элемент в верхней или нижней части контейнера путем смешивания align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;"> div class="mb-auto p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div> div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;"> div class="p-2 bd-highlight">Flex itemdiv> div class="p-2 bd-highlight">Flex itemdiv> div class="mt-auto p-2 bd-highlight">Flex itemdiv> div>

Wrap

Измените способ переноса гибких элементов в гибкий контейнер. Выберите вариант без обтекания (по умолчанию в браузере) .flex-nowrap , обертывание с помощью .flex-wrap или обратное обертывание с помощью .flex-wrap-reverse .

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex flex-nowrap"> . div>

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex flex-wrap"> . div>

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

div class="d-flex flex-wrap-reverse"> . div>

Адаптивные варианты также существуют для flex-wrap .

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

Order

Измените визуальный порядок определенных гибких элементов с помощью нескольких order утилит. Мы предоставляем только варианты для того, чтобы сделать элемент первым или последним, а также выполнить сброс для использования порядка DOM. Как и order любое целочисленное значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.

Первый гибкий элемент
Второй гибкий элемент
Третий гибкий элемент

div class="d-flex flex-nowrap bd-highlight"> div class="order-3 p-2 bd-highlight">First flex itemdiv> div class="order-2 p-2 bd-highlight">Second flex itemdiv> div class="order-1 p-2 bd-highlight">Third flex itemdiv> div>

Адаптивные варианты также существуют для order .

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

Кроме того, существуют также адаптивные классы .order-first и .order-last классы, которые изменяют order элемент, применяя order: -1 и order: 6 , соответственно.

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

Align content

Используйте align-content утилиты на контейнерах flexbox, чтобы выровнять гибкие элементы вместе по поперечной оси. Выберите из start (браузера по умолчанию), end , center , between , around , или stretch . Чтобы продемонстрировать эти утилиты, мы усилили flex-wrap: wrap и увеличили количество гибких элементов.

Берегись! Это свойство не влияет на отдельные строки гибких элементов.

CSS Flexbox в Bootstrap 4

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

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

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

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

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

d-flex flex-row my-flex-container"> 
1
 
2
 
3

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

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

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

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

flex-row-reverse my-flex-container"> 
1
 
2
 
3

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

Классы 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 на примере выше:

justify-content-start my-flex-container"> 
1
 
2
 
3

justify-content-center my-flex-container"> 
1
 
2
 
3

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

justify-content-end my-flex-container"> 
1
 
2
 
3

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

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

justify-content-around my-flex-container"> 
1
 
2
 
3

А с justify-content-between :

justify-content-between my-flex-container"> 
1
 
2
 
3

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

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

flex-column my-flex-container-column"> 
1
 
2
 
3

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

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

flex-column-reverse my-flex-container-column"> 
1
 
2
 
3

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

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

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

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

align-items-start my-flex-container"> 
1
 
2
 
3

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

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

align-items-center my-flex-container"> 
1
 
2
 
3

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

align-items-end my-flex-container"> 
1
 
2
 
3

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

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

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

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

 
1
 
align-self-start my-flex-item">2
 
3

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

 
1
 
align-self-center my-flex-item">2
 
3

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

 
1
 
align-self-end my-flex-item">2
 
3

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

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

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20

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

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

flex-wrap my-flex-container"> 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20

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

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

flex-wrap-reverse my-flex-container"> 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20

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

Order

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

 
order-3 my-flex-item">1
 
order-1 my-flex-item">2
 
order-2 my-flex-item">3

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

Auto Margin’ы

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

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

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

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

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

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

 
mr-auto my-flex-item">1
 
2
 
3

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

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

 
mt-auto my-flex-item">1
 
2
 
3

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

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

 
1
 
2
 
3

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

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

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

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