Mena

Kgontšha maitshwaro a go koba

Diriša displaydidirišwa go hlama setshelo sa flexbox le go fetoša dielemente tša bana tša thwii go ba dilo tša go kobega. Ditshelo tša go koba le dilo di kgona go fetošwa go ya pele ka dithoto tša tlaleletšo tša go koba.

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

Diphapano tša go arabela le tšona di gona bakeng sa .d-flexle .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

Taetšo

Beakanya tlhahlo ya dilo tša go koba ka gare ga setshelo sa go koba ka didirišwa tša tlhahlo. Maemong a mantši o ka tlogela sehlopha sa go rapalala mo ka ge go se fetoge ga sephephediši e le row. Le ge go le bjalo, o ka kopana le maemo ao o bego o swanetše go beakanya boleng bjo ka go lebanya (go swana le dipeakanyo tše di arabelago).

Šomiša .flex-rowgo beakanya tlhahlo ya go rapalala (ya sephephediši ya go se fetoge), goba .flex-row-reversego thoma tlhahlo ya go rapalala go tšwa ka lehlakoreng le le fapanego.

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

Šomiša .flex-columngo beakanya tlhahlo ya go ema thwii, goba .flex-column-reversego thoma tlhahlo ya go ema thwii go tšwa ka lehlakoreng le le fapanego.

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

Diphapano tša go arabela le tšona di gona bakeng sa 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

Lokafatša diteng

Šomiša justify-contentdidirišwa go ditshelo tša flexbox go fetoša go logaganya ga dilo tša go kobega godimo ga sele ye kgolo (x-axis go thoma, y-axis ge e ba flex-direction: column). Kgetha go tšwa go start(ya go se fetoge ya sephephediši), end, center, between, around, goba 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>

Diphapano tša go arabela le tšona di gona bakeng sa 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

Logaganya dilo

Šomiša align-itemsdidirišwa go ditshelo tša flexbox go fetoša go logaganya ga dilo tša go kobega godimo ga sele ya sefapano (y-axis go thoma, x-axis ge e ba flex-direction: column). Kgetha go tšwa go start, end, center, baseline, goba stretch(ya go se fetoge ya sephephediši).

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

Diphapano tša go arabela le tšona di gona bakeng sa 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

Logaganya boithati

Diriša align-selfdidirišwa go dilo tša flexbox go fetoša ka botee go logaganya ga tšona godimo ga sele ya sefapano (y-axis go thoma, x-axis ge e ba flex-direction: column). Kgetha go tšwa go dikgetho tše di swanago le align-items: start, end, center, baseline, goba stretch(sephephediši sa go se fetoge).

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

Diphapano tša go arabela le tšona di gona bakeng sa 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

Tlatša

Šomiša .flex-fillsehlopha godimo ga lelokelelo la dielemente tša bana babo rena go di gapeletša go tsena ka bophara bjo bo lekanago le diteng tša tšona (goba bophara bjo bo lekanago ge e le gore diteng tša tšona di sa fete mapokisi a tšona a mellwane) mola o tšea sekgoba ka moka sa go rapalala seo se lego gona.

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

Diphapano tša go arabela le tšona di gona bakeng sa flex-fill.

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

Gola le go fokotšega

Diriša .flex-grow-*didirišwa go fetoša bokgoni bja selo sa go kobega bja go gola go tlatša sekgoba seo se lego gona. Mohlaleng wo o lego ka mo tlase, .flex-grow-1dielemente di šomiša sekgoba ka moka seo se lego gona seo e ka se kgonago, mola di dumelela dilo tše pedi tše di šetšego tša go koba sekgoba sa tšona se se nyakegago.

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

Diriša .flex-shrink-*didirišwa go fetoša bokgoni bja selo sa go kobega bja go fokotšega ge e ba go nyakega. Mohlaleng wo o lego ka mo tlase, selo sa bobedi sa go koba ka .flex-shrink-1se gapeletšega go phuthela dikagare tša sona go mothaladi o mofsa, se “fokotšega” go dumelela sekgoba se se oketšegilego sa selo sa peleng sa go koba ka .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>

Diphapano tša go arabela le tšona di gona bakeng sa flex-growle 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 e ka dira dilo tše dingwe tše dibotse tše di šiišago ge o kopanya di-flex alignments le di-autor margin. Ka tlase ke mehlala e meraro ya go laola dilo tše di kobegilego ka di- auto margin: default (ga go na auto margin), go kgoromeletša dilo tše pedi ka go le letona ( .me-auto), le go kgoromeletša dilo tše pedi ka go le letshadi ( .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>

Ka go logaganya-dilo

Suthiša ka go ema thwii selo se tee sa go koba godimo goba fase ga setshelo ka go hlakanya align-items, flex-direction: column, le margin-top: autogoba 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>

Phuthela

Fetoša ka moo dilo tša go kobega di phuthelago ka gona ka gare ga setshelo sa go kobega. Kgetha go tšwa go go se be le go phuthela le gatee (ya sephephediši ya go se fetoge) ka .flex-nowrap, go phuthela ka .flex-wrap, goba go bušetša morago go phuthela ka .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>

Diphapano tša go arabela le tšona di gona bakeng sa 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

Tatelano

Fetola tatelano ya pono ya dilo tše itšego tša go koba ka orderdidirišwa tše mmalwa. Re fana fela ka dikgetho tša go dira selo pele goba sa mafelelo, gammogo le go seta gape go šomiša taelo ya DOM. Bjalo ka ge ordere tšea boleng bjo bongwe le bjo bongwe bja palomoka go tloga go 0 go ya go 5, oketša CSS ya tlwaelo bakeng sa boleng bjo bongwe le bjo bongwe bja tlaleletšo bjo bo nyakegago.

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

Diphapano tša go arabela le tšona di gona bakeng sa 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

Go tlaleletša go na le gape le go arabela .order-firstle .order-lastdiklase tšeo di fetošago orderya elemente ka go diriša order: -1le order: 6, ka go latelelana.

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

Logaganya diteng

Šomiša align-contentdidirišwa go ditshelo tša flexbox go logaganya dilo tša go koba mmogo godimo ga sele ya sefapano. Kgetha go tšwa go start(ya go se fetoge ya sephephediši), end, center, between, around, goba stretch. Go bontšha didirišwa tše, re gapeleditše flex-wrap: wraple go oketša palo ya dilo tša go kobega.

Dihlogo godimo! Thepa ye ga e na mafelelo go methaladi e tee ya dilo tše di kobegilego.

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

Diphapano tša go arabela le tšona di gona bakeng sa 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

Selo sa boraditaba

O nyaka go boeletša karolo ya selo sa methopo ya ditaba go tšwa go Bootstrap 4? E bope gape ka nako e kopana ka didirišwa tše sego kae tša go kobega tšeo di dumelelago le go feto-fetoga le maemo le go dira gore dilo di be tša gago go feta pele.

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

Gomme o re o nyaka go tsepamiša diteng ka go otlologa kgauswi le seswantšho:

<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

API ya Didirišwa

Didirišwa tša Flexbox di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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