Flex
Kurumidza gadzirisa dhizaini, kurongeka, uye saizi yemakoramu egidhi, kufambisa, zvikamu, uye nezvimwe zvine sutu izere yeinoteerera flexbox utilities. Kuti uwane mamwe maitiro akaoma, tsika CSS inogona kudikanwa.
Shandisa displayzvinoshandiswa kugadzira flexbox mudziyo uye shandura yakananga vana zvinhu kuita zvinhu zvinochinjika. Flex midziyo uye zvinhu zvinokwanisa kugadziridzwa zvakare nekuwedzera flex zvivakwa.
<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>Misiyano inopindura iripo zvakare .d-flexuye .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
Gadzirisa mafambiro ezvinhu zvinochinjika mumudziyo unochinjika une nzira yekushandisa. Kazhinji unogona kusiya kirasi yakatwasuka pano sezvo browser default iri row. Nekudaro, iwe unogona kusangana nemamiriro ezvinhu apo iwe waida kujekesa kukosha uku (senge inoteerera marongero).
Shandisa .flex-rowkuseta yakachinjika gwara (iyo browser default), kana .flex-row-reversekutanga yakachinjika nzira kubva kune yakatarisana.
<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>Shandisa .flex-columnkumisa nzira yakatwasuka, kana .flex-column-reversekutanga yakatwasuka kubva kune rimwe divi.
<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>Misiyano inopindura iripo zvakare kune 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
Shandisa justify-contentzvinoshandiswa pamidziyo yeflexbox kushandura kurongeka kwezvinhu zvinoshanduka pane axis huru (iyo x-axis yekutanga, y-axis kana flex-direction: column). Sarudza kubva start(browser default), end, center, between, kana 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>Misiyano inopindura iripo zvakare kune 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
Shandisa align-itemszvinoshandiswa pamidziyo yeflexbox kushandura kurongeka kwezvinhu zvinochinjika pamuchinjiko axis (iyo y-axis yekutanga, x-axis kana flex-direction: column). Sarudza kubva start, end, center, baseline, kana stretch(browser default).
<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>Misiyano inopindura iripo zvakare kune 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
Shandisa align-selfzvinoshandiswa pazvinhu zveflexbox kuti uchinje kurongeka kwavo pamuchinjiko axis (iyo y-axis yekutanga, x-axis kana flex-direction: column). Sarudza kubva pane dzimwe sarudzo se align-items: start, end, center, baseline, kana stretch(browser default).
<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>Misiyano inopindura iripo zvakare kune 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 inogona kuita zvimwe zvinhu zvinokatyamadza kana iwe uchisanganisa kuchinjika kuchinjika neauto margin. Inoratidzwa pazasi mienzaniso mitatu yekudzora zvinhu zvinochinjika kuburikidza neauto margin: default (hapana auto margin), kusundira zvinhu zviviri kurudyi ( .mr-auto), uye kusundira zvinhu zviviri kuruboshwe ( .ml-auto).
Nehurombo, IE10 uye IE11 haitsigire nemazvo auto margins pazvinhu zvinochinjika izvo mubereki ane husimbe husina hunhu justify-content. Ona iyi StackOverflow mhinduro kune rumwe ruzivo.
<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>Fambisa chinhu chimwe chete kumusoro kana kuzasi kwegaba nekusanganisa align-items, flex-direction: column, uye margin-top: autokana margin-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>Shandura kuti zvinhu zvinochinjika zvinoputira sei mugaba reflex. Sarudza kubva pasina kuputira zvachose (iyo browser default) ne .flex-nowrap, kuputira ne .flex-wrap, kana kudzosera kumashure kuputira ne .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>Misiyano inopindura iripo zvakare kune 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
Shandura kurongeka kwekuona kwezvinhu zvakachinjika zvine mashoma ekushandisa order. Isu tinongopa sarudzo dzekugadzira chinhu chekutanga kana chekupedzisira, pamwe nekugadzirisa zvakare kushandisa iyo DOM odha. Sezvinotora orderchero huwandu hunokosha (semuenzaniso, 5), wedzera tsika CSS kune chero humwe hunokosha hunodiwa.
<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>Misiyano inopindura iripo zvakare kune 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
Shandisa align-contentzvinoshandiswa pamidziyo yeflexbox kurongedza zvinhu zvinochinjika pamwechete pamuchinjiko axis. Sarudza kubva start(browser default), end, center, between, around, kana stretch. Kuratidza zvishandiso izvi, takamanikidza flex-wrap: wrapuye nekuwedzera huwandu hwezvinhu zvinochinjika.
Musoro! Ichi chivakwa hachina mhedzisiro pamitsara imwechete yezvinhu zvinochinjika.
<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>Misiyano inopindura iripo zvakare kune 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