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.
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
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
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
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
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
Tumia .flex-filldarasa kwenye mfululizo wa vipengele vya ndugu ili kuvilazimisha kwa upana sawa huku ukichukua nafasi zote za mlalo zinazopatikana. Ni muhimu sana kwa upana sawa, au urambazaji uliohalalishwa.
<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>Tofauti za mwitikio pia zipo kwa flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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 na .flex-shrink-1kinalazimika kukunja yaliyomo kwenye mstari mpya, "kupungua" ili kuruhusu nafasi zaidi kwa kipengee cha awali cha .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
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>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>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
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
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-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