Source

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

Посока

Задайте посоката на гъвкави елементи във гъвкав контейнер с помощни програми за насочване. В повечето случаи можете да пропуснете хоризонталния клас тук, тъй като браузърът по подразбиране е 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 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да започнете вертикалната посока от противоположната страна.

Гъвкав елемент 1

Гъвкав елемент 2

Гъвкав елемент 3

Гъвкав елемент 1

Гъвкав елемент 2

Гъвкав елемент 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.

Гъвкав артикул

<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(браузър по подразбиране).

Гъвкав артикул

<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 за начало, оста x, ако flex-direction: column). Изберете от същите опции като align-items: start, end, center, baseline, или stretch(браузър по подразбиране).

Гъвкав артикул

Подравнен гъвкав елемент

Гъвкав артикул

Подравнен гъвкав елемент

Гъвкав артикул

Подравнен гъвкав елемент

Гъвкав артикул

Подравнен гъвкав елемент

Гъвкав артикул

Подравнен гъвкав елемент

Гъвкав артикул

<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класа върху поредица от сродни елементи, за да ги принудите да имат ширини, равни на съдържанието им (или равни ширини, ако съдържанието им не надхвърля границите им), като същевременно заемат цялото налично хоризонтално пространство.

Гъвкав артикул с много съдържание

Гъвкав артикул

<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елементите използват цялото налично пространство, което могат, като същевременно позволяват на останалите два гъвкави елемента тяхното необходимо пространство.

Гъвкав артикул

Трети гъвкав елемент

<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.

Гъвкав артикул

<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 за повече подробности.

Гъвкав артикул

<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.

Гъвкав артикул

<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.

Гъвкав артикул

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

Гъвкав артикул

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

Гъвкав артикул

<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

Поръчка

Променете визуалния ред на конкретни гъвкави елементи с шепа 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и увеличихме броя на гъвкавите елементи.

Горе главата! Това свойство няма ефект върху единични редове от гъвкави елементи.

Гъвкав артикул

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

Гъвкав артикул

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

Гъвкав артикул

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

Гъвкав артикул

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

Гъвкав артикул

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

Гъвкав артикул

<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