Flex
Sinthani mwachangu masanjidwe, mayanidwe, ndi kukula kwa mizere ya gridi, mayendedwe, zigawo, ndi zina zambiri ndi gulu lonse lazinthu zomvera za flexbox. Kuti mugwiritse ntchito zovuta zambiri, CSS yokhazikika ingakhale yofunikira.
Yambitsani machitidwe osinthasintha
Gwiritsani displayntchito zida kuti mupange chotengera cha flexbox ndikusintha zinthu zachindunji za ana kukhala zinthu zosinthika. Zotengera za Flex ndi zinthu zimatha kusinthidwanso ndi zina zowonjezera.
<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>Zosiyanasiyana zoyankhira ziliponso .d-flexndi .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
Mayendedwe
Khazikitsani mayendedwe a zinthu zosinthika mu chidebe chosinthika chokhala ndi zowongolera. Nthawi zambiri mutha kusiya kalasi yopingasa apa popeza kusakhazikika kwa msakatuli ndi row. Komabe, mutha kukumana ndi zochitika zomwe mumafunikira kuyika mtengo uwu (monga masanjidwe omvera).
Gwiritsani .flex-rowntchito kukhazikitsa njira yopingasa (osatsegula osatsegula), kapena .flex-row-reversekuyambitsa njira yopingasa kuchokera mbali ina.
<div class="d-flex flex-row mb-3">
<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>Gwiritsani .flex-columnntchito kuyika kolowera kolowera, kapena .flex-column-reversekuyambitsa njira yoyimirira kuchokera mbali ina.
<div class="d-flex flex-column mb-3">
<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>Zosiyanasiyana zoyankhira ziliponso za 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
Konzani zomwe zili
Gwiritsani justify-contentntchito zida zomwe zili pamabokosi a flexbox kuti musinthe masinthidwe azinthu zosinthika pa axis yayikulu (x-axis poyambira, y-axis ngati flex-direction: column). Sankhani kuchokera start(zosasintha za msakatuli), end, center, between, around, kapena 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>
Zosiyanasiyana zoyankhira ziliponso za 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
Gwirizanitsani zinthu
Gwiritsani align-itemsntchito zida zomwe zili pamabokosi a flexbox kuti musinthe masinthidwe a zinthu zosinthika pamtanda (mzere wa y poyambira, x-axis ngati flex-direction: column). Sankhani kuchokera ku start, end, center, baseline, kapena stretch(osasintha osatsegula).
<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>
Zosiyanasiyana zoyankhira ziliponso za 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
Lumikizani nokha
Gwiritsani align-selfntchito zofunikira pa zinthu za flexbox kuti aliyense payekha asinthe masinthidwe awo pamtanda (mzere wa y poyambira, x-axis ngati flex-direction: column). Sankhani kuchokera muzosankha zomwezo monga align-items: start, end, center, baseline, kapena stretch(kusakhazikika kwa msakatuli).
<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>
Zosiyanasiyana zoyankhira ziliponso za 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
Lembani
Gwiritsani ntchito .flex-fillkalasi pazigawo zingapo za abale kuti muwakakamize kukhala m'lifupi lofanana ndi zomwe ali nazo (kapena m'lifupi mwake ngati zomwe zili sizikuposa mabokosi awo) pamene mutenga malo onse opingasa omwe alipo.
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>Zosiyanasiyana zoyankhira ziliponso za flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Kula ndi kuchepa
Gwiritsani .flex-grow-*ntchito zofunikira kuti musinthe kuthekera kwa chinthu chosinthika kuti chikule kuti mudzaze malo omwe alipo. Muchitsanzo chomwe chili pansipa, .flex-grow-1zinthuzo zimagwiritsa ntchito malo onse omwe angakwanitse, ndikulola kuti zinthu ziwiri zotsalirazo zikhale malo awo ofunikira.
<div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
</div>Gwiritsani .flex-shrink-*ntchito zida kuti musinthe kuthekera kwa chinthu chosinthika kuti chichepe ngati kuli kofunikira. Muchitsanzo chomwe chili pansipa, chinthu chachiwiri chosinthika nacho .flex-shrink-1chimakakamizika kukulunga zomwe zili mumzere watsopano, "kuchepa" kuti mulole malo ochulukirapo a chinthu cham'mbuyomo ndi .w-100.
<div class="d-flex">
<div class="p-2 w-100">Flex item</div>
<div class="p-2 flex-shrink-1">Flex item</div>
</div>Zosiyanasiyana zoyankhira ziliponso flex-growndi 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
Mphepete mwa Auto
Flexbox imatha kuchita zinthu zochititsa chidwi mukasakaniza zosinthika ndi maginito agalimoto. Zomwe zili pansipa ndi zitsanzo zitatu zowongolera zinthu zosinthika kudzera m'mphepete mwagalimoto: kusakhazikika (palibe malire), kukankhira zinthu ziwiri kumanja ( .me-auto), ndikukankhira zinthu ziwiri kumanzere ( .ms-auto).
<div class="d-flex mb-3">
<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 mb-3">
<div class="me-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 mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-auto p-2">Flex item</div>
</div>Zogwirizana ndi zinthu
Molunjika sunthani chinthu chimodzi pamwamba kapena pansi pa chidebe posakaniza align-items, flex-direction: columnkapena .margin-top: automargin-bottom: auto
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>Manga
Sinthani momwe zinthu zosinthira zimakwirira mu chotengera chosinthira. Sankhani kuchokera osakulunga konse (osatsegula osasintha) ndi .flex-nowrap, kukulunga ndi .flex-wrap, kapena kukulunga m'mbuyo ndi .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>
Zosiyanasiyana zoyankhira ziliponso za 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
Order
Sinthani mawonekedwe owoneka azinthu zina zosinthika ndi orderzofunikira zochepa. Timangopereka zosankha zopangira chinthu choyamba kapena chomaliza, komanso kukonzanso kuti mugwiritse ntchito dongosolo la DOM. Monga momwe orderzimatengera kuchuluka kulikonse kuchokera pa 0 mpaka 5, onjezani CSS yokhazikika pazowonjezera zilizonse zofunika.
<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>Zosiyanasiyana zoyankhira ziliponso za 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
Kuphatikiza apo palinso makalasi omvera .order-firstkomanso .order-lastosintha omwe amasintha orderchinthu pogwiritsa ntchito order: -1ndi order: 6, motsatana.
.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
Gwirizanitsani zomwe zili
Gwiritsani align-contentntchito zida zomwe zili pamabokosi a flexbox kuti mugwirizanitse zinthu pamodzi pamtanda. Sankhani kuchokera start(zosasintha za msakatuli), end, center, between, around, kapena stretch. Kuti tiwonetse zida izi, takakamiza flex-wrap: wrapndikuwonjezera kuchuluka kwa zinthu zosinthika.
Mungodziwiratu! Katunduyu alibe mphamvu pa mizere imodzi ya zinthu zosinthika.
<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>
Zosiyanasiyana zoyankhira ziliponso za align-content.
.align-content-start.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-between.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-between.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-between.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-between.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-between.align-content-xxl-around.align-content-xxl-stretch
Media chinthu
Mukuyang'ana kutengera gawo la media media kuchokera ku Bootstrap 4? Ikonzeninso posachedwa ndi zida zingapo zosinthika zomwe zimalola kusinthasintha komanso makonda kuposa kale.
<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>Ndipo nenani kuti mukufuna kuyika pakati pazomwe zili pafupi ndi chithunzichi:
<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
Zothandizira za Flexbox zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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
),
"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,
),
),