Align items center bootstrap 4

Содержание

Preview

More in Bootstrap Flexbox

Bootstrap drag & drop editor with 230+ components.

You have successfully subscribed to the newsletter!

Статья, в которой рассмотрим классы фреймворка Bootstrap 4 для работы с CSS 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 .

Bootstrap Flexbox — Класс flex-row

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

Bootstrap Flexbox — Класс flex-row-reverse

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

Bootstrap Flexbox — Классы flex-column и flex-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-row (слева направо)	flex-wrap-reverse (снизу вверх)
flex-row-reverse (справа налево)	flex-wrap (сверху вниз)
flex-row-reverse (справа налево)	flex-wrap-reverse (снизу вверх)
flex-column (сверху вниз)	flex-wrap (слева направо)
flex-column (сверху вниз)	flex-wrap-reverse (справа налево)
flex-column-reverse (снизу вверх)	flex-wrap (слева направо)
flex-column-reverse (снизу вверх)	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 относительно конца оси.

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

Выравнивание 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 по центру.

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

Изменение выравнивания конкретно выбранного 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-элемент в направлении поперечной оси (в пределах линии) относительно начала оси, а последний — относительно конца оси.

Bootstrap Flexbox — Изменение выравнивания конкретно выбранного flex-элемента в направлении поперечной оси

Выравнивание линий 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 ) по центру.

Bootstrap Flexbox — Выравниваний линий flex-контейнера (в направлении поперечной оси)

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

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

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

Bootstrap Flexbox — Пример смешивания justify-content c margin auto

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

Bootstrap Flexbox — Пример смешивания align-items c margin auto

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

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

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

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

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

Bootstrap Flexbox — Изменение визуального порядка следования элементов во flex-контейнере

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Responsive variations also exist for .d-flex and .d-inline-flex .

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal >row . However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Responsive variations also exist for 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

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column ). Choose from start (browser default), end , center , between , or around .

Responsive variations also exist for 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

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column ). Choose from start , end , center , baseline , or stretch (browser default).

Responsive variations also exist for 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 self

Use align-self utilities on flexbox items to indiv >flex-direction: column ). Choose from the same options as align-items : start , end , center , baseline , or stretch (browser default).

Responsive variations also exist for 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

Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right ( .mr-auto ), and pushing two items to the left ( .ml-auto ).

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value. See this StackOverflow answer for more details.