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