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 mubintu byoroshye. Ibikoresho bya flex nibintu birashobora guhindurwa kurushaho hamwe nibindi byongeweho.

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

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

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

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

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-itemsibikorwa byingenzi 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 byingirakamaro 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( Mucukumbuzi 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

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

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

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

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