Flex

Dhibiti kwa haraka mpangilio, upangaji na ukubwa wa safu wima za gridi, usogezaji, vipengee na mengine mengi ukitumia mkusanyiko kamili wa huduma za flexbox zinazojibika. Kwa utekelezaji changamano zaidi, CSS maalum inaweza kuhitajika.

Washa tabia za kubadilika

Tumia displayhuduma ili kuunda kontena la flexbox na kubadilisha vipengele vya watoto moja kwa moja kuwa vipengee vya kunyumbulika . Vyombo vya Flex na vitu vinaweza kubadilishwa zaidi na sifa za ziada za kubadilika.

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

Tofauti za mwitikio pia zipo kwa .d-flexna .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

Mwelekeo

Weka uelekeo wa vipengee vya kunyumbulika katika chombo cha kunyumbulika chenye huduma za mwelekeo. Katika hali nyingi unaweza kuacha darasa la mlalo hapa kwani chaguo-msingi la kivinjari ni row. Hata hivyo, unaweza kukutana na hali ambapo ulihitaji kuweka thamani hii kwa uwazi (kama vile mipangilio inayoitikia).

Tumia .flex-rowkuweka mwelekeo mlalo (chaguo-msingi ya kivinjari), au .flex-row-reversekuanza mwelekeo mlalo kutoka upande wa pili.

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

Tumia .flex-columnkuweka mwelekeo wima, au .flex-column-reversekuanza mwelekeo wima kutoka upande wa pili.

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

Tofauti za mwitikio pia zipo kwa 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

Thibitisha maudhui

Tumia justify-contenthuduma kwenye vyombo vya flexbox ili kubadilisha mpangilio wa vipengee vinavyopinda kwenye mhimili mkuu (mhimili wa x kuanza, mhimili y ikiwa flex-direction: column). Chagua kutoka start(chaguo-msingi ya kivinjari), end, center, between, au 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>

Tofauti za mwitikio pia zipo kwa 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

Pangilia vitu

Tumia align-itemshuduma kwenye vyombo vya flexbox ili kubadilisha upangaji wa vitu vinavyonyumbulika kwenye mhimili mtambuka (mhimili y kuanza, x-mhimili ikiwa flex-direction: column). Chagua kutoka start, end, center, baseline, au stretch(chaguo-msingi ya kivinjari).

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

Tofauti za mwitikio pia zipo kwa 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

Jitengeneze

Tumia align-selfhuduma kwenye vipengee vya flexbox ili kubadilisha mpangilio wao mmoja mmoja kwenye mhimili wa msalaba (mhimili y kuanza, x-mhimili ikiwa flex-direction: column). Chagua kutoka kwa chaguo sawa na align-items: start, end, center, baseline, au stretch(chaguo-msingi ya kivinjari).

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

Tofauti za mwitikio pia zipo kwa 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

Jaza

Tumia .flex-filldarasa kwenye msururu wa vipengee vya ndugu ili kuvilazimisha katika upana sawa na maudhui yao (au upana sawa ikiwa maudhui yao hayazidi visanduku vyao vya mpaka) huku ukichukua nafasi zote za mlalo zinazopatikana.

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

Tofauti za mwitikio pia zipo kwa flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill

Kukua na kupungua

Tumia .flex-grow-*huduma kugeuza uwezo wa bidhaa kukua ili kujaza nafasi inayopatikana. Katika mfano hapa chini, .flex-grow-1vipengele hutumia nafasi yote inayopatikana inaweza, huku kuruhusu vitu viwili vilivyobaki vya flex nafasi yao muhimu.

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

Tumia .flex-shrink-*huduma kugeuza uwezo wa kipengee flexifu kupungua ikihitajika. Katika mfano ulio hapa chini, kipengee cha pili cha kunyumbua nacho kinalazimika .flex-shrink-1kukunja yaliyomo kwenye mstari mpya, "kinapungua" ili kuruhusu nafasi zaidi kwa kipengee cha awali cha kunyumbua na .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>

Tofauti za mwitikio pia zipo kwa flex-growna 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

Pambizo otomatiki

Flexbox inaweza kufanya mambo ya kupendeza unapochanganya mipangilio inayonyumbulika na pambizo otomatiki. Inayoonyeshwa hapa chini ni mifano mitatu ya kudhibiti vipengee vinavyobadilika-badilika kupitia pambizo otomatiki: chaguo-msingi (hakuna ukingo otomatiki), kusukuma vipengee viwili kulia ( .mr-auto), na kusukuma vipengee viwili kushoto ( .ml-auto).

Kwa bahati mbaya, IE10 na IE11 hazitumii pambizo otomatiki ipasavyo kwenye vipengee vinavyobadilika ambavyo mzazi wake ana thamani isiyo chaguomsingi justify-content. Tazama jibu hili la StackOverflow kwa maelezo zaidi.

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

Pamoja na vitu vya kupanga

Sogeza kipengee kimoja kwa wima hadi juu au chini ya chombo kwa kuchanganya align-items, flex-direction: columnna margin-top: autoau margin-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>

Funga

Badilisha jinsi vipengee vinavyopindana hufungana kwenye chombo cha kukunja. Chagua kutoka kwa kutofungamana hata kidogo (chaguo-msingi ya kivinjari) na .flex-nowrap, kufunga na .flex-wrap, au kufungia nyuma kwa .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>

Tofauti za mwitikio pia zipo kwa 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

Agizo

Badilisha mpangilio wa kuona wa vipengee maalum vya kunyumbulika kwa kutumia orderhuduma chache. Tunatoa tu chaguo za kutengeneza kipengee kwanza au mwisho, pamoja na kuweka upya ili kutumia agizo la DOM. Kama orderinavyochukua thamani yoyote kamili (kwa mfano, 5), ongeza CSS maalum kwa thamani zozote za ziada zinazohitajika.

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

Tofauti za mwitikio pia zipo kwa 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

Pangilia maudhui

Tumia align-contenthuduma kwenye vyombo vya flexbox ili kupanga vitu pamoja kwenye mhimili mtambuka. Chagua kutoka start(chaguo-msingi ya kivinjari), end, center, between, around, au stretch. Ili kuonyesha huduma hizi, tumetekeleza flex-wrap: wrapna kuongeza idadi ya vipengee vinavyobadilikabadilika.

Vichwa juu! Sifa hii haina athari kwa safu mlalo moja ya vitu vinavyobadilikabadilika.

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

Tofauti za mwitikio pia zipo kwa 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