Source

Флекс

Брзо управувајте со распоредот, порамнувањето и големината на мрежните колони, навигацијата, компонентите и повеќе со целосен пакет на респонзивни алатки на 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за да започнете хоризонтална насока од спротивната страна.

Flex ставка 1

Flex ставка 2

Flex ставка 3

Flex ставка 1

Flex ставка 2

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

Flex ставка 1

Flex ставка 2

Flex ставка 3

Flex ставка 1

Flex ставка 2

Flex ставка 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 за да го промените порамнувањето на флексибилните ставки на главната оска (оската 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класата на низа браќа и сестри елементи за да ги присилите на ширина еднаква на нивната содржина (или еднакви ширини ако нивната содржина не ги надминува нивните гранични кутии) додека го зазема целиот расположлив хоризонтален простор.

Flex ставка со многу содржина

Флекс ставка

<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