Flex
Ni kiakia ṣakoso awọn ifilelẹ, titete, ati iwọn ti awọn ọwọn akoj, lilọ kiri, awọn paati, ati diẹ sii pẹlu suite kikun ti awọn ohun elo flexbox idahun. Fun awọn imuse idiju diẹ sii, CSS aṣa le jẹ pataki.
Mu awọn ihuwasi rọ
Waye displayawọn ohun elo lati ṣẹda apoti flexbox ki o yi awọn eroja ti awọn ọmọde taara pada si awọn ohun kan rọ. Awọn apoti Flex ati awọn ohun kan ni anfani lati ṣe atunṣe siwaju pẹlu awọn ohun-ini irọrun.
<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>Awọn iyatọ idahun tun wa fun .d-flexati .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
Itọsọna
Ṣeto itọsọna ti awọn ohun kan ti o rọ sinu apo eiyan pẹlu awọn ohun elo itọnisọna. Ni ọpọlọpọ igba o le fi kilaasi petele silẹ nibi bi aiyipada aṣawakiri jẹ row. Sibẹsibẹ, o le ba pade awọn ipo nibiti o nilo lati ṣeto iye yii ni gbangba (bii awọn ipalemo idahun).
Lo .flex-rowlati ṣeto itọnisọna petele (aiyipada aṣawakiri), tabi .flex-row-reverselati bẹrẹ itọsọna petele lati apa idakeji.
<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>Lo .flex-columnlati ṣeto itọsọna inaro, tabi .flex-column-reverselati bẹrẹ itọsọna inaro lati apa idakeji.
<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>Awọn iyatọ idahun tun wa fun 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
Da akoonu
Lo justify-contentawọn ohun elo lori awọn apoti flexbox lati yi titete awọn ohun kan rọ lori ipo akọkọ (apa-x lati bẹrẹ, y-axis ti o ba jẹ flex-direction: column). Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi 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>
Awọn iyatọ idahun tun wa fun 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
Sopọ awọn nkan
Lo align-itemsawọn ohun elo lori awọn apoti flexbox lati yi titete awọn ohun kan rọ lori ipo agbelebu (y-axis lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).
<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>
Awọn iyatọ idahun tun wa fun 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
Dapọ mọ ara ẹni
Lo align-selfawọn ohun elo lori awọn ohun kan flexbox lati ṣe iyipada titete wọn ni ẹyọkan lori ipo agbelebu (apa y lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati awọn aṣayan kanna bi align-items: start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).
<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>
Awọn iyatọ idahun tun wa fun 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
Kun
Lo .flex-fillkilasi naa lori lẹsẹsẹ awọn eroja arakunrin lati fi ipa mu wọn sinu awọn iwọn ti o dọgba si akoonu wọn (tabi awọn iwọn iwọn dogba ti akoonu wọn ko ba kọja awọn apoti aala wọn) lakoko gbigbe gbogbo aaye petele ti o wa.
<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>Awọn iyatọ idahun tun wa fun flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Dagba ati dinku
Lo .flex-grow-*awọn ohun elo lati yi agbara ohun kan rọ lati dagba lati kun aaye to wa. Ni apẹẹrẹ ni isalẹ, awọn .flex-grow-1eroja lo gbogbo aaye ti o wa ti o le, lakoko ti o ngbanilaaye awọn ohun elo meji ti o ku ni aaye pataki wọn.
<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>Lo .flex-shrink-*awọn ohun elo lati yi agbara ohun kan rọ lati dinku ti o ba jẹ dandan. Ninu apẹẹrẹ ti o wa ni isalẹ, ohun elo ti o ni irọrun keji pẹlu .flex-shrink-1ti fi agbara mu lati fi ipari si awọn akoonu rẹ si laini titun kan, "isunkun" lati gba aaye diẹ sii fun ohun kan ti o rọ tẹlẹ pẹlu .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>Awọn iyatọ idahun tun wa fun flex-growati 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
Awọn ala aifọwọyi
Flexbox le ṣe diẹ ninu awọn ohun oniyi lẹwa nigbati o ba dapọ awọn tito nkan lẹsẹsẹ pẹlu awọn ala adaṣe. Ti o han ni isalẹ jẹ awọn apẹẹrẹ mẹta ti ṣiṣakoso awọn ohun kan rọ nipasẹ awọn ala adaṣe: aiyipada (ko si ala adaṣe), titari awọn ohun meji si apa ọtun ( .me-auto), ati titari awọn ohun meji si apa osi ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Pẹlu titọ-ohun
Ni inaro gbe ohun kan rọ si oke tabi isalẹ ti apoti kan nipa dapọ align-items, flex-direction: column, ati margin-top: autotabi 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>Fi ipari si
Yi pada bi awọn ohun kan ti n yipada sinu apo eiyan kan. Yan lati ko si murasilẹ rara (aifọwọyi aṣawakiri) pẹlu .flex-nowrap, murasilẹ pẹlu .flex-wrap, tabi yipo pẹlu .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>
Awọn iyatọ idahun tun wa fun 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
Bere fun
Yi aṣẹ wiwo ti awọn ohun kan rọ pẹlu ọwọ awọn orderohun elo. A pese awọn aṣayan fun ṣiṣe ohun kan ni akọkọ tabi kẹhin, bakanna bi atunto lati lo aṣẹ DOM. Bi ordero ṣe gba iye odidi eyikeyi lati 0 si 5, ṣafikun aṣa CSS fun eyikeyi awọn iye afikun ti o nilo.
<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>Awọn iyatọ idahun tun wa fun 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
Ni afikun awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati order: 6, lẹsẹsẹ.
.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
Sopọ akoonu
Lo align-contentawọn ohun elo lori awọn apoti flexbox lati mu awọn nkan rọ pọ lori ipo agbelebu. Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi stretch. Lati ṣe afihan awọn ohun elo wọnyi, a ti fi ipa flex-wrap: wrapmu ati pọ si nọmba awọn ohun kan rọ.
Efeti sile! Ohun-ini yii ko ni ipa lori awọn ori ila ẹyọkan ti awọn nkan rọ.
<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>
Awọn iyatọ idahun tun wa fun 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Ohun elo media
Ṣe o n wa lati tun ṣe paati ohun elo media lati Bootstrap 4? Tun ṣe ni igba diẹ pẹlu awọn ohun elo irọrun diẹ ti o gba laaye paapaa irọrun ati isọdi ju ti iṣaaju lọ.
<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>Ati pe o fẹ lati ni inaro aarin akoonu ti o tẹle aworan naa:
<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>Sass
API Awọn ohun elo
Awọn ohun elo Flexbox jẹ ikede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.
"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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),