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 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

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 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

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, 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

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

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

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 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>

Zosiyanasiyana zoyankhira ziliponso za flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-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 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 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 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

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 ( .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>

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 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>

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

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 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

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