Source

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.

Ndine chotengera cha flexbox!
<div class="d-flex p-2">I'm a flexbox container!</div>
Ndine flexbox chotengera!
<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

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.

Flex chinthu 1
Flex chinthu 2
Flex chinthu 3
Flex chinthu 1
Flex chinthu 2
Flex chinthu 3
<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.

Flex chinthu 1
Flex chinthu 2
Flex chinthu 3
Flex chinthu 1
Flex chinthu 2
Flex chinthu 3
<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

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.

Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<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).

Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<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).

Flex chinthu
Chinthu chosinthika chokhazikika
Flex chinthu
Flex chinthu
Chinthu chosinthika chokhazikika
Flex chinthu
Flex chinthu
Chinthu chosinthika chokhazikika
Flex chinthu
Flex chinthu
Chinthu chosinthika chokhazikika
Flex chinthu
Flex chinthu
Chinthu chosinthika chokhazikika
Flex chinthu
<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

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 a auto pazinthu zosinthika zomwe kholo lawo silinasinthidwe justify-content. Onani yankho la StackOverflow kuti mumve zambiri.

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

Zogwirizana ndi zinthu

Molunjika sunthani chinthu chimodzi pamwamba kapena pansi pa chidebe posakaniza align-items, flex-direction: columnkapena .margin-top: automargin-bottom: auto

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

Manga

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.

Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex flex-nowrap">
  ...
</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex flex-wrap">
  ...
</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<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.

Chinthu choyamba chosinthira
Chinthu chachiwiri chosinthira
Chinthu chachitatu chosinthira
<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

Gwirizanitsani zomwe zili

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.

Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex align-content-end flex-wrap">...</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex align-content-center flex-wrap">...</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex align-content-between flex-wrap">...</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<div class="d-flex align-content-around flex-wrap">...</div>
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
Flex chinthu
<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