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.
Gwiritsani displayntchito zida kuti mupange chotengera cha flexbox ndikusintha zinthu za ana mwachindunji kukhala zinthu zosinthika. Zotengera za Flex ndi zinthu zimatha kusinthidwanso ndi zina zowonjezera.
<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>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
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 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>Gwiritsani .flex-columnntchito kuyika kolowera kolowera, kapena .flex-column-reversekuyambitsa njira yoyimirira kuchokera mbali ina.
<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>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
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, kapena 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>Zosiyanasiyana zoyankhira ziliponso za 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
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
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
Gwiritsani ntchito .flex-fillkalasi pamndandanda wazinthu za abale kuti muwakakamize kukhala m'lifupi mwake mukutenga malo onse opingasa omwe alipo. Zothandiza makamaka pakuyenda molingana, kapena kulungamitsidwa, kuyenda.
<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>Zosiyanasiyana zoyankhira ziliponso za flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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 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>Gwiritsani .flex-shrink-*ntchito zida kuti musinthe kuthekera kwa chinthu chosinthika kuti chichepe ngati kuli kofunikira. Muchitsanzo chomwe chili pansipa, chinthu chachiwiri chopindika nacho .flex-shrink-1chimakakamizika kukulunga zomwe zili mumzere watsopano, "kuchepa" kuti pakhale malo ochulukirapo a chinthu cham'mbuyocho ndi .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>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
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 ( .mr-auto), ndikukankhira zinthu ziwiri kumanzere ( .ml-auto).
Tsoka ilo, IE10 ndi IE11 sizigwirizana bwino ndi malire agalimoto pazinthu zosinthika zomwe kholo lawo silinasinthidwe justify-content. Onani yankho la StackOverflow kuti mumve zambiri.
<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>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 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>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
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 orderzimatengera mtengo wamtundu uliwonse (mwachitsanzo, 5), onjezani CSS yokhazikika pazowonjezera zilizonse zofunika.
<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>Zosiyanasiyana zoyankhira ziliponso za 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
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-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