Флек
Брзо управљајте распоредом, поравнањем и величином колона мреже, навигацијом, компонентама и још много тога помоћу комплетног пакета прилагодљивих флекбок услужних програма. За сложеније имплементације, прилагођени ЦСС може бити неопходан.
Примените 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</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