Флек

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

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

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

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

Ауто маргине

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

Нажалост, ИЕ10 и ИЕ11 не подржавају правилно аутоматске маргине на флек ставкама чији родитељ има justify-contentвредност која није подразумевана. Погледајте овај СтацкОверфлов одговор за више детаља.

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

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