Flex
Бързо управлявайте оформлението, подравняването и оразмеряването на колоните на мрежата, навигацията, компонентите и други с пълен набор от гъвкави помощни програми за flexbox. За по-сложни реализации може да е необходим персонализиран CSS.
Активиране на гъвкави поведения
Приложете displayпомощни програми, за да създадете flexbox контейнер и да трансформирате директни дъщерни елементи в flex елементи. Гъвкавите контейнери и елементи могат да бъдат допълнително модифицирани с допълнителни гъвкави свойства.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><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да започнете хоризонталната посока от противоположната страна.
<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да започнете вертикалната посока от противоположната страна.
<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.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класа върху поредица от сродни елементи, за да ги принудите да имат ширини, равни на съдържанието им (или равни ширини, ако съдържанието им не надхвърля границите им), като същевременно заемат цялото налично хоризонтално пространство.
<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-xxl-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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Автоматични маржове
Flexbox може да направи някои доста страхотни неща, когато смесвате гъвкави подравнявания с автоматични полета. По-долу са показани три примера за контролиране на гъвкави елементи чрез автоматични полета: по подразбиране (без автоматично поле), натискане на два елемента надясно ( .me-auto) и натискане на два елемента наляво ( .ms-auto).
<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="me-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="ms-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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Поръчка
Променете визуалния ред на конкретни гъвкави елементи с шепа orderпомощни програми. Предоставяме само опции за създаване на елемент първи или последен, както и нулиране за използване на реда на DOM. Тъй като orderприема всяка целочислена стойност от 0 до 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-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-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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Медиен обект
Търсите да копирате компонента на медиен обект от Bootstrap 4? Пресъздайте го за нула време с няколко помощни програми за flex, които позволяват дори повече гъвкавост и персонализиране от преди.
<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>И кажете, че искате вертикално да центрирате съдържанието до изображението:
<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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),