Flex
Laola meralo ka potlako, tekano le boholo ba likholomo tsa grid, ho tsamaea, likarolo, le tse ling ka lethathamo le felletseng la lisebelisoa tse arabelang tsa flexbox. Bakeng sa ts'ebetsong e rarahaneng haholoanyane, CSS e tloaelehileng e ka 'na ea hlokahala.
Etsa hore boitšoaro bo hlephileng
Sebelisa displaylisebelisoa ho theha setshelo sa flexbox le ho fetola likarolo tsa bana tse tobileng hore e be lintho tse feto-fetohang. Lijana tsa Flex le lintho li khona ho fetoloa ho ea pele ka thepa e eketsehileng ea flex.
<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>Liphetoho tse arabelang li boetse li teng bakeng sa .d-flexle .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
Tataiso
Beha tsela ea lintho tse feto-fetohang ka har'a sets'oants'o se nang le lisebelisoa tsa tataiso. Maemong a mangata o ka siea sehlopha se otlolohileng mona kaha sebatli sa kamehla ke row. Leha ho le joalo, u ka 'na ua kopana le maemo ao u neng u hloka ho beha boleng bona ka mokhoa o hlakileng (joaloka meralo e arabelang).
Sebelisa .flex-rowho seta tsela e tšekaletseng (sebatli sa sebatli), kapa .flex-row-reverseho qala tsela e tšekaletseng ho tloha ka lehlakoreng le leng.
<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>Sebelisa .flex-columnho beha tsela e otlolohileng, kapa .flex-column-reverseho qala tsela e otlolohileng ho tloha ka lehlakoreng le leng.
<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>Liphetoho tse arabelang li boetse li teng bakeng sa 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
Netefatsa litaba
Sebelisa justify-contentlisebelisoa holim'a lijana tsa flexbox ho fetola tekano ea lintho tse feto-fetohang holim'a axis e kholo (x-axis ho qala, y-axis haeba flex-direction: column). Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, around, kapa 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>
Liphetoho tse arabelang li boetse li teng bakeng sa 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
Hlophisa lintho
Sebelisa align-itemslisebelisoa holim'a lijana tsa flexbox ho fetola tsela eo lintho tse feto-fetohang li leng ka har'a axis ea sefapano (k-axis ea ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa ho start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).
<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>
Liphetoho tse arabelang li boetse li teng bakeng sa 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
Ipakanye
Sebelisa align-selflisebelisoa linthong tsa flexbox ho fetola ka bonngoe tsela eo li tsamaisanang ka eona holim'a axis ea sefapano (y-axis ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa likhethong tse tšoanang le tsa align-items: start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).
<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>
Liphetoho tse arabelang li boetse li teng bakeng sa 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
Tlatsa
Sebelisa .flex-fillsehlopha letotong la likarolo tsa bana ho li qobella ho ba bophara bo lekanang le litaba tsa bona (kapa bophara bo lekanang haeba litaba tsa bona li sa fete mabokose a bona a moeli) ha u ntse u nka sebaka sohle se otlolohileng.
<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>Liphetoho tse arabelang li boetse li teng bakeng sa flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Hola le ho honyela
Sebelisa .flex-grow-*lisebelisoa ho fetola bokhoni ba ntho e fetohang ho hola ho tlatsa sebaka se fumanehang. Mohlala o ka tlase, .flex-grow-1likarolo li sebelisa sebaka sohle se fumanehang seo li ka se khonang, ha li ntse li lumella lintho tse peli tse setseng tsa flex sebaka sa tsona se hlokahalang.
<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>Sebelisa .flex-shrink-*lisebelisoa ho fetola bokhoni ba ntho ea flex hore e fokotsehe ha ho hlokahala. Mohlala o ka tlase, ntho ea bobeli ea flex e nang le .flex-shrink-1e qobelloa ho thatela likahare tsa eona moleng o mocha, "ho honyela" ho lumella sebaka se eketsehileng bakeng sa ntho e fetileng ea flex ka .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>Liphetoho tse arabelang li boetse li teng bakeng sa flex-growle 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
Mekhahlelo ea likoloi
Flexbox e ka etsa lintho tse ntle haholo ha o kopanya lialgment tse feto-fetohang le mehala ea koloi. Ka tlaase mona ho na le mehlala e meraro ea ho laola lintho tse feto-fetohang ka maqheku a koloi: kamehla (ha ho margin ea koloi), ho sutumelletsa lintho tse peli ka ho le letona ( .me-auto), le ho sutumelletsa lintho tse peli ka ho le letšehali ( .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>Ka ho lumellana-lintho
Ka ho otloloha, suthisa ntho e le 'ngoe ka holimo kapa tlase ho setshelo ka ho kopanya align-items, flex-direction: columnkapa .margin-top: automargin-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>Qela
Fetola hore na lintho tse flexhang li phuthela joang ka har'a setshelo sa flex. Khetha ho se phutheloe ho hang (sebatli sa sebatli) ka .flex-nowrap, ho phuthela ka .flex-wrap, kapa ho phuthela ka morao ka .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>
Liphetoho tse arabelang li boetse li teng bakeng sa 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
Taelo
Fetola tatellano ea pono ea lintho tse ikhethileng ka lisebelisoa tse 'maloa order. Re fana feela ka likhetho tsa ho etsa ntho pele kapa ea ho qetela, hammoho le ho seta bocha ho sebelisa odara ea DOM. Joalo ka ha orderho nka boleng bo felletseng ho tloha ho 0 ho isa ho 5, eketsa CSS ea tloaelo bakeng sa boleng bofe kapa bofe bo hlokahalang.
<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>Liphetoho tse arabelang li boetse li teng bakeng sa 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
Ho feta moo ho boetse ho na le lihlopha tse arabelang .order-firstle .order-lasttse fetolang orderntho e itseng ka ho sebelisa order: -1le order: 6, ka ho latellana.
.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
Hlophisa litaba
Sebelisa align-contentlisebelisoa ho li-container tsa flexbox ho hokahanya lintho hammoho holim'a axis ea sefapano. Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, around, kapa stretch. Ho bonts'a lisebelisoa tsena, re qobelletse flex-wrap: wraple ho eketsa palo ea lintho tse feto-fetohang.
Hlokomela! Thepa ena ha e na phello meleng e le 'ngoe ea lintho tse feto-fetohang.
<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>
Liphetoho tse arabelang li boetse li teng bakeng sa 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
Ntho ea media
U batla ho pheta karolo ea ntho ea media ho Bootstrap 4? E ntlafatse kapele ka lisebelisoa tse 'maloa tse u lumellang hore u be bonolo le ho itlhophisa ho feta pele.
<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>'Me u re u batla ho beha litaba sebakeng se otlolohileng haufi le setšoantšo:
<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
Utilities API
Lisebelisoa tsa Flexbox li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa API.
"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,
),
),