Source

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.

Ndi kontineri ya flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ndi umuyoboro wa flexbox!
<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.

Ingingo ya 1
Ingingo ya 2
Ingingo ya 3
Ingingo ya 1
Ingingo ya 2
Ingingo ya 3
<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.

Ingingo ya 1
Ingingo ya 2
Ingingo ya 3
Ingingo ya 1
Ingingo ya 2
Ingingo ya 3
<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

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

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

Ikintu cyoroshye
Guhuza flex ikintu
Ikintu cyoroshye
Ikintu cyoroshye
Guhuza flex ikintu
Ikintu cyoroshye
Ikintu cyoroshye
Guhuza flex ikintu
Ikintu cyoroshye
Ikintu cyoroshye
Guhuza flex ikintu
Ikintu cyoroshye
Ikintu cyoroshye
Guhuza flex ikintu
Ikintu cyoroshye
<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.

Flex ikintu kirimo ibintu byinshi
Ikintu cyoroshye
Ikintu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cya gatatu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex flex-nowrap">
  ...
</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex flex-wrap">
  ...
</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<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.

Ikintu cya mbere cya flex
Ikintu cya kabiri cya flex
Ikintu cya gatatu cyoroshye
<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.

Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex align-content-end flex-wrap">...</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex align-content-center flex-wrap">...</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex align-content-between flex-wrap">...</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<div class="d-flex align-content-around flex-wrap">...</div>
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
Ikintu cyoroshye
<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-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