in English

Флек

Брзо управљајте распоредом, поравнањем и величином колона мреже, навигацијом, компонентама и још много тога помоћу комплетног пакета прилагодљивих флекбок услужних програма. За сложеније имплементације, прилагођени ЦСС може бити неопходан.

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

Омогућите флексибилна понашања

Примените displayуслужне програме да креирате флекбок контејнер и трансформишете директне подређене елементе у флек ставке. Флек контејнери и ставке се могу даље модификовати са додатним флексибилним својствима.

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

хтмл

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

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

хтмл

<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за покретање хоризонталног смера са супротне стране.

Флек ставка 1

Флек ставка 2

Флек ставка 3

Флек ставка 1

Флек ставка 2

Флек ставка 3

хтмл

<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за покретање вертикалног смера са супротне стране.

Флек ставка 1

Флек ставка 2

Флек ставка 3

Флек ставка 1

Флек ставка 2

Флек ставка 3

хтмл

<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услужне програме на флекбок контејнерима да промените поравнање флек ставки на главној оси (к-оса за почетак, и-оса ако је 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услужне програме на флекбок контејнерима да промените поравнање флек ставки на попречној оси (и-оса за почетак, к-оса ако 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помоћне програме на флекбок ставкама да бисте појединачно променили њихово поравнање на попречној оси (и-оса за почетак, к-оса ако је 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">
  <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елементи користе сав расположиви простор који могу, док преостале две флексибилне ставке дозвољавају неопходан простор.

Флек итем

Трећа флек ставка

хтмл

<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.

Флек итем

хтмл

<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

Ауто маргине

Флекбок може да уради неке прилично сјајне ствари када помешате флексибилна поравнања са аутоматским маргинама. У наставку су приказана три примера контроле флек ставки путем аутоматских маргина: подразумевано (без аутоматске маргине), гурање две ставке удесно ( .me-auto) и гурање две ставке улево ( .ms-auto).

Флек итем

хтмл

<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.

Флек итем

хтмл

<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услужних програма. Пружамо само опције за прављење ставке прве или последње, као и ресетовање да бисте користили ДОМ редослед. Пошто orderузима било коју целобројну вредност од 0 до 5, додајте прилагођени ЦСС за све потребне додатне вредности.

Прва флексибилна ставка

Друга флексибилна ставка

Трећа флек ставка

хтмл

<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услужне програме на флекбок контејнерима да поравнате флек ставке заједно на попречној оси. Бирајте између 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

Медијски објекат

Желите да реплицирате компоненту медијског објекта из Боотстрапа 4? Поново га направите у кратком року са неколико флексибилних услужних програма који омогућавају још већу флексибилност и прилагођавање него раније.

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

хтмл

<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>

Сасс

Утилитиес АПИ

Флекбок услужни програми су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

    "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,
      ),
    ),