in English

Флекс

Брзо управувајте со распоред��т, порамнувањето и големината на мрежните колони, навигацијата, компонентите и повеќе со целосен пакет на респонзивни комунални услуги на flexbox. За посложени имплементации, може да биде неопходен прилагоден CSS.

На оваа страница

Овозможете флексибилни однесувања

Применете displayги комуналните услуги за да создадете контејнер за флексибилност и да ги трансформирате директните детски елементи во флексибилни ставки. Flex контејнерите и предметите може дополнително да се модифицираат со дополнителни флексибилни својства.

Јас сум контејнер за флексбокс!

html

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

Јас сум вграден контејнер за флексбокс!

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

Flex ставка 1

Flex ставка 2

Flex ставка 3

Flex ставка 1

Flex ставка 2

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

Flex ставка 1

Flex ставка 2

Flex ставка 3

Flex ставка 1

Flex ставка 2

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

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

Флекс ставка

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? Повторно создадете го за кратко време со неколку флексибилни алатки кои овозможуваат уште поголема флексибилност и прилагодување од порано.

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

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>

Сас

Utilities API

Utilities на Flexbox се декларирани во нашите Utilities API во scss/_utilities.scss. Научете како да ги користите Utilities 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,
      ),
    ),