Флекс
Брзо управувајте со распоредот, порамнувањето и големината на мрежните колони, навигацијата, компонентите и повеќе со целосен пакет на респонзивни алатки на flexbox. За посложени имплементации, може да биде неопходен прилагоден CSS.
Овозможете флексибилни однесувања
Применете display
ги комуналните услуги за да создадете контејнер за флексибилност и да ги трансформирате директните детски елементи во флексибилни ставки. 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 за да го промените порамнувањето на флексибилните ставки на главната оска (оската 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 за да го промените порамнувањето на флексибилните ставки на попречната оска (оската 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-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