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.
Bvumira flex maitiro
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 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">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.d-xxl-flex.d-xxl-inline-flex
Direction
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 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>Shandisa .flex-columnkumisa nzira yakatwasuka, kana .flex-column-reversekutanga yakatwasuka kubva kune rimwe divi.
<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>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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Ruramisa zvirimo
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, around, kana evenly.
<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>
<div class="d-flex justify-content-evenly">...</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-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Rongedza zvinhu
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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Zvigadzirise
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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Zadza
Shandisa .flex-fillkirasi pane zvakatevedzana zvezvinhu zvehama kuvamanikidza muhupamhi hwakaenzana nezviri mukati mavo (kana hupamhi hwakaenzana kana zvirimo zvisingapfuure mabhokisi-bhokisi) uku uchitora nzvimbo yese iripo yakachinjika.
<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>Misiyano inopindura iripo zvakare kune flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Kura uye kuderera
Shandisa .flex-grow-*zvinoshandiswa kushandura kugona kwechinhu chinoshanduka kuti chikure kuzadza nzvimbo iripo. Mumuenzaniso uri pazasi, .flex-grow-1zvinhu zvinoshandisa zvese zviripo nzvimbo yazvinogona, uku zvichibvumidza izvo zviviri zvasara zvinhu zvinochinjika nzvimbo yavo inodiwa.
<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>Shandisa .flex-shrink-*zvinoshandiswa kushandura kugona kwechimwe chinhu kuderera kana zvichidikanwa. Mumuenzaniso uri pazasi, chinhu chechipiri chinochinjika nacho .flex-shrink-1chinomanikidzwa kuputira zvirimo kumutsara mutsva, "kuderera" kubvumira nzvimbo yakawanda yechinhu chekare chekare ne .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>Misiyano inopindura iripo zvakare flex-growuye 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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Auto margins
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 ( .me-auto), uye kusundira zvinhu zviviri kuruboshwe ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Nekugadzirisa-zvinhu
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 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>Wrap
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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Order
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 kubva pa0 kusvika pa5, wedzera tsika CSS kune chero humwe hunokosha hunodiwa.
<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>Misiyano inopindura iripo zvakare kune order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Pamusoro pezvo kune zvakare anopindura .order-firstuye .order-lastmakirasi anoshandura iyo orderyechinhu nekushandisa order: -1uye order: 6, zvichiteerana.
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Rongedza zvirimo
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 pamitsetse 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Media chinhu
Kutsvaga kudzokorora iyo midhiya chinhu chikamu kubva kuBootstrap 4? Igadzirise zvakare pasina nguva neashoma emagetsi ekushandisa anobvumira kutonyanya kuchinjika uye kugadzirisa kupfuura kare.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Uye uti iwe unoda kuisa pakati pawo zviri padivi pemufananidzo:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass
Purogiramu inonzi Utilities
Flexbox utilities inoziviswa mune yedu zvishandiso API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),