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

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 gwara rakati kwara, kana .flex-column-reversekutanga iro rakati chechetere 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

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

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

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

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

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

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

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

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 (semuenzaniso, 5), 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-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

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