Imiterere

Gucunga byihuse imiterere, guhuza, hamwe nubunini bwa grid inkingi, kugendagenda, ibice, nibindi byinshi hamwe na suite yuzuye ya flexbox yingirakamaro. Kubindi bikorwa bigoye, CSS yihariye irashobora kuba nkenerwa.

Gushoboza imyitwarire yoroheje

Koresha displayibikoresho kugirango ukore kontineri ya flexbox hanyuma uhindure abana bayobora ibintu byoroshye. Ibikoresho bya flex nibintu birashobora guhindurwa kure hamwe nibindi byongeweho.

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

Guhindura ibisubizo nabyo birahari kuri .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

Icyerekezo

Shiraho icyerekezo cyibintu bya flex mubikoresho bya flex hamwe nicyerekezo cyingirakamaro. Mubihe byinshi ushobora gusiba urwego rutambitse hano nkuko mushakisha isanzwe ari row. Ariko, urashobora guhura nibihe ukeneye gushiraho neza agaciro (nkuburyo busubiza).

Koresha .flex-rowgushiraho icyerekezo gitambitse (mushakisha isanzwe), cyangwa .flex-row-reversegutangira icyerekezo gitambitse uhereye kuruhande.

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

Koresha .flex-columngushiraho icyerekezo gihagaritse, cyangwa .flex-column-reversegutangira icyerekezo gihagaritse uhereye kuruhande.

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

Guhindura ibisubizo nabyo birahari kuri 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

Emeza ibirimo

Koresha justify-contentibikorwa byingirakamaro kuri flexbox kugirango uhindure guhuza ibintu bya flex kumurongo nyamukuru (x-axis yo gutangira, y-axis niba flex-direction: column). Hitamo kuva start(mushakisha isanzwe ) end,,, cyangwa center.betweenaround

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

Guhindura ibisubizo nabyo birahari kuri 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

Huza ibintu

Koresha align-itemsibikoresho kuri kontineri ya flexbox kugirango uhindure guhuza ibintu bya flex kumurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column). Hitamo kuva ,,,, startcyangwa ( Mucukumbuzi isanzwe end) center.baselinestretch

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

Guhindura ibisubizo nabyo birahari kuri 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

Ihuze wenyine

Koresha align-selfibikorwa byingenzi kuri flexbox kugirango uhindure kugiti cyawe guhuza umurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column). Hitamo mumahitamo amwe nka : ,,,, align-itemscyangwa start( mushakisha isanzwe).endcenterbaselinestretch

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

Guhindura ibisubizo nabyo birahari kuri 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

Uzuza

Koresha .flex-fillurwego kurukurikirane rwibintu bavukana kugirango ubahatire mubugari bungana nibirimo (cyangwa ubugari bungana niba ibirimo bitarenze imipaka-agasanduku) mugihe ufata umwanya wose utambitse.

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

Guhindura ibisubizo nabyo birahari kuri flex-fill.

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

Gukura no kugabanuka

Koresha .flex-grow-*ibikorwa kugirango uhindure ibintu bya flex ubushobozi bwo gukura kugirango wuzuze umwanya uhari. Murugero rukurikira, .flex-grow-1ibice bikoresha umwanya wose uboneka birashobora, mugihe wemereye ibintu bibiri bya flex bisigaye umwanya wabo ukenewe.

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

Koresha .flex-shrink-*ibikoresho kugirango uhindure ibintu bya flex ubushobozi bwo kugabanuka nibiba ngombwa. Murugero rukurikira, ikintu cya kabiri cya flex hamwe .flex-shrink-1nuguhatirwa kuzinga ibirimo kumurongo mushya, "kugabanuka" kugirango yemere umwanya munini kubintu byabanjirije flex hamwe 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>

Guhindura ibisubizo nabyo birahari kuri 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

Imodoka

Flexbox irashobora gukora ibintu byiza cyane mugihe uvanze guhuza flex hamwe na auto margins. Herekanwa hepfo ni ingero eshatu zo kugenzura ibintu bya flex ukoresheje amamodoka yimodoka: isanzwe (nta modoka yimodoka), gusunika ibintu bibiri iburyo ( .mr-auto), no gusunika ibintu bibiri ibumoso ( .ml-auto).

Kubwamahirwe, IE10 na IE11 ntabwo bashyigikira neza amamodoka yimodoka kubintu bya flex umubyeyi afite justify-contentagaciro kadasanzwe. Reba iki gisubizo cya StackOverflow kubindi bisobanuro.

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

Guhuza-ibintu

Hindura rwose ikintu kimwe cya flex hejuru cyangwa hepfo yikintu uvanze align-items, flex-direction: columnna, margin-top: autocyangwa 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>

Gupfunyika

Hindura uburyo ibintu bya flex bipfunyika mubintu byoroshye. Hitamo kuva nta gupfunyika na gato (mushakisha isanzwe) hamwe .flex-nowrap, gupfunyika .flex-wrap, cyangwa gupfunyika hamwe .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>

Guhindura ibisubizo nabyo birahari kuri 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

Tegeka

Hindura gahunda igaragara yibintu bya flex yihariye hamwe nintoki orderzingirakamaro. Dutanga gusa amahitamo yo gukora ikintu mbere cyangwa cyanyuma, kimwe no gusubiramo kugirango ukoreshe gahunda ya DOM. Nkuko orderbifata agaciro kamwe (eg, 5), ongeraho CSS yihariye kubintu byose byongeweho bikenewe.

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

Guhindura ibisubizo nabyo birahari kuri 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

Huza ibirimo

Koresha align-contentibikorwa byingenzi kuri kontineri ya flexbox kugirango uhuze ibintu bya flex hamwe kumurongo wambukiranya. Hitamo kuva ( mushakisha startisanzwe ) ,,,,, cyangwa end. Kugirango tugaragaze ibikorwa byingirakamaro, twashyize mubikorwa kandi twongera umubare wibintu bya flex.centerbetweenaroundstretchflex-wrap: wrap

Umutwe! Uyu mutungo nta ngaruka ufite kumurongo umwe wibintu bya flex.

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

Guhindura ibisubizo nabyo birahari kuri 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