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">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
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">
<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">
<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
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
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 a auto pazinthu zosinthika zomwe kholo lawo silinasinthidwe justify-content. Onani yankho la StackOverflow kuti mumve zambiri.
<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>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" 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>Sinthani momwe zinthu zosinthira zimakwirira mu chidebe chosinthira. Sankhani kuchokera osakulunga konse (osatsegula osatsegula) 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">
<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-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 zonyamula ma flexbox kuti mugwirizanitse zinthu pamodzi pamtanda. Sankhani kuchokera start(zosasintha za msakatuli), end, center, between, around, kapena stretch. Kuti tiwonetse zidazi, 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