Flex

Бързо управлявайте оформлението, подравняването и оразмеряването на колоните на мрежата, навигацията, компонентите и други с пълен набор от гъвкави помощни програми за flexbox. За по-сложни реализации може да е необходим персонализиран CSS.

На тази страница

Активиране на гъвкави поведения

Приложете displayпомощни програми, за да създадете flexbox контейнер и да трансформирате директни дъщерни елементи в flex елементи. Гъвкавите контейнери и елементи могат да бъдат модифицирани допълнително с допълнителни гъвкави свойства.

Аз съм flexbox контейнер!

html

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

Аз съм вграден flexbox контейнер!

html

<div class="d-inline-flex p-2">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

html

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

Използвайте .flex-column, за да зададете вертикална посока или .flex-column-reverseда започнете вертикалната посока от противоположната страна.

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

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

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

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

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

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

html

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

Обосновете съдържанието

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

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

<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помощни програми на 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-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-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
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Напълнете

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

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

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

html

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

Отзивчиви варианти също съществуват за flex-fill.

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

Растете и се свивайте

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

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

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

html

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

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

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

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Автоматични маржове

Flexbox може да направи някои доста страхотни неща, когато смесвате гъвкави подравнявания с автоматични полета. По-долу са показани три примера за контролиране на гъвкави елементи чрез автоматични полета: по подразбиране (без автоматично поле), натискане на два елемента надясно ( .me-auto) и натискане на два елемента наляво ( .ms-auto).

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

html

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

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

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

С подравняване на елементи

Вертикално преместете един гъвкав елемент в горната или долната част на контейнер чрез смесване align-itemsна , flex-direction: columnи margin-top: autoили margin-bottom: auto.

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

html

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

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Поръчка

Променете визуалния ред на конкретни гъвкави елементи с шепа orderпомощни програми. Предоставяме само опции за създаване на елемент първи или последен, както и нулиране за използване на реда на DOM. Тъй като orderприема всяка целочислена стойност от 0 до 5, добавете персонализиран CSS за всички необходими допълнителни стойности.

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

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

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

html

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</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помощни програми на 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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Медиен обект

Търсите да копирате компонента на медиен обект от Bootstrap 4? Пресъздайте го за нула време с няколко помощни програми за flex, които позволяват дори повече гъвкавост и персонализиране от преди.

Това е съдържание от медиен компонент. Можете да замените това с произволно съдържание и да го коригирате според нуждите.

html

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

И кажете, че искате вертикално да центрирате съдържанието до изображението:

html

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

дързък

API за помощни програми

Помощните програми на Flexbox са декларирани в нашия API за помощни програми в scss/_utilities.scss. Научете как да използвате API на помощните програми.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),