Source

Флекс

Хутка кіруйце размяшчэннем, выраўноўваннем і памерам слупкоў сеткі, навігацыяй, кампанентамі і многім іншым з дапамогай поўнага набору адаптыўных утыліт 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

Напрамак

Задайце кірунак гнуткіх элементаў у гнуткім кантэйнеры з дапамогай утыліт напрамкі. У большасці выпадкаў вы можаце апусціць тут гарызантальны клас, бо браўзер па змаўчанні row. Аднак вы можаце сутыкнуцца з сітуацыямі, калі вам трэба было яўна задаць гэта значэнне (напрыклад, адаптыўныя макеты).

Выкарыстоўвайце .flex-row, каб усталяваць гарызантальны кірунак (браўзер па змаўчанні) або .flex-row-reverseпачаць гарызантальны кірунак з супрацьлеглага боку.

Flex пункт 1

Flex элемент 2

Flex пункт 3

Flex пункт 1

Flex элемент 2

Flex пункт 3

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

Выкарыстоўвайце .flex-column, каб задаць вертыкальны кірунак або .flex-column-reverseпачаць вертыкальны кірунак з супрацьлеглага боку.

Flex пункт 1

Flex элемент 2

Flex пункт 3

Flex пункт 1

Flex элемент 2

Flex пункт 3

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</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

Абгрунтаваць змест

Выкарыстоўвайце justify-contentўтыліты на кантэйнерах flexbox, каб змяніць выраўноўванне flex-элементаў на галоўнай восі (вось X для пачатку, вось Y, калі flex-direction: column). Абярыце з start(браўзер па змаўчанні), end, center, betweenабо around.

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>

Адаптыўныя варыянты таксама існуюць для 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ўтыліты на кантэйнерах flexbox, каб змяніць выраўноўванне flex-элементаў па папярочнай восі (вось Y для пачатку, вось X, калі flex-direction: column). Выберыце з start, end, center, baselineабо stretch(браўзер па змаўчанні).

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-selfўтыліты для элементаў flexbox, каб індывідуальна змяніць іх выраўноўванне па папярочнай восі (вось y для пачатку, вось х, калі flex-direction: column). Выберыце з тых жа параметраў, што і align-items: start, end, center, baseline, або stretch(браўзер па змаўчанні).

Flex пункт

Выраўнаваны гнуткі элемент

Flex пункт

Выраўнаваны гнуткі элемент

Flex пункт

Выраўнаваны гнуткі элемент

Flex пункт

Выраўнаваны гнуткі элемент

Flex пункт

Выраўнаваны гнуткі элемент

Flex пункт

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Адаптыўныя варыянты таксама існуюць для 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-fillклас на серыі аднатыпных элементаў, каб прымусіць іх мець шырыню, роўную іх зместу (або роўную шырыню, калі іх змест не перавышае рамкі), займаючы пры гэтым усю даступную гарызантальную прастору.

Прадмет Flex з вялікай колькасцю кантэнту

Flex пункт

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Адаптыўныя варыянты таксама існуюць для flex-fill.

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

Расці і змяншацца

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

Flex пункт

Трэці гнуткі элемент

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

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

Flex пункт

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

Адаптыўныя варыянты таксама існуюць для flex-growі flex-shrink.

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1

Аўтаматычныя маржы

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

На жаль, IE10 і IE11 не падтрымліваюць належным чынам аўтаматычныя палі для гнуткіх элементаў, бацькоўскі элемент якіх мае нестандартнае justify-contentзначэнне. Глядзіце гэты адказ StackOverflow для больш падрабязнай інфармацыі.

Flex пункт

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

З выраўноўваннем элементаў

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

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 item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

Абгарнуць

Зменіце спосаб загортвання гнуткіх элементаў у гнуткі кантэйнер. Выбірайце варыянты без пераносу (па змаўчанні для браўзера) з дапамогай .flex-nowrap, перанос з дапамогай .flex-wrapабо зваротны перанос з дапамогай .flex-wrap-reverse.

Flex пункт

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

Flex пункт

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

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 з дапамогай некалькіх orderутыліт. Мы прапануем толькі варыянты для таго, каб зрабіць элемент першым або апошнім, а таксама скід для выкарыстання парадку DOM. Паколькі orderпрымае любое цэлае значэнне (напрыклад, 5), дадайце карыстальніцкі CSS для любых неабходных дадатковых значэнняў.

Першы гнуткі элемент

Другі гнуткі элемент

Трэці гнуткі элемент

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

Адаптыўныя варыянты таксама існуюць для order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

Выраўнаваць змест

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

Галаву ўверх! Гэта ўласцівасць не ўплывае на асобныя радкі гнуткіх элементаў.

Flex пункт

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex пункт

<div class="d-flex align-content-end flex-wrap">...</div>

Flex пункт

<div class="d-flex align-content-center flex-wrap">...</div>

Flex пункт

<div class="d-flex align-content-between flex-wrap">...</div>

Flex пункт

<div class="d-flex align-content-around flex-wrap">...</div>

Flex пункт

<div class="d-flex align-content-stretch flex-wrap">...</div>

Адаптыўныя варыянты таксама існуюць для 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