Флек
Брзо управљајте распоредом, поравнањем и величином колона мреже, навигацијом, компонентама и још много тога помоћу комплетног пакета прилагодљивих флекбок услужних програма. За сложеније имплементације, прилагођени ЦСС може бити неопходан.
Примените 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
Подесите правац флек ставки у флек контејнеру помоћу услужних програма за смер. У већини случајева овде можете да изоставите хоризонталну класу јер је подразумевани претраживач row. Међутим, можете наићи на ситуације у којима сте морали експлицитно да подесите ову вредност (као што су прилагодљиви изгледи).
Користите .flex-rowза постављање хоризонталног смера (подразумевано у претраживачу) или .flex-row-reverseза покретање хоризонталног смера са супротне стране.
<div class="d-flex flex-row">
<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за покретање вертикалног смера са супротне стране.
<div class="d-flex flex-column">
<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
Користите 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
Флекбок може да уради неке прилично сјајне ствари када помешате флексибилна поравнања са аутоматским маргинама. У наставку су приказана три примера контроле флек ставки путем аутоматских маргина: подразумевано (без аутоматске маргине), гурање две ставке удесно ( .mr-auto) и гурање две ставке улево ( .ml-auto).
Нажалост, ИЕ10 и ИЕ11 не подржавају правилно аутоматске маргине на флек ставкама чији родитељ има justify-contentвредност која није подразумевана. Погледајте овај СтацкОверфлов одговор за више детаља.
<div class="d-flex">
<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">
<div class="mr-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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-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" 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" 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
Промените визуелни редослед одређених флекс ставки помоћу неколико orderуслужних програма. Пружамо само опције за прављење ставке прве или последње, као и ресетовање да бисте користили ДОМ редослед. Пошто orderузима било коју целобројну вредност (нпр. 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-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