Olova

Endla leswaku ku va ni mahanyelo yo olova

Tirhisa displayswitirhisiwa ku tumbuluxa xikhomela-ndhawu xa flexbox na ku hundzula swiaki swa vana vo kongoma swi va swilo swo flex. Swibye swa flex na swilo swikota ku cinciwa kuya emahlweni hi swivumbeko swo engetelela swa flex.

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

Ku hambana loku hlamulaka na kona ku kona eka .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
• .d-xxl-flex
• .d-xxl-inline-flex

Tlhelo

Seta ndlela ya swilo swo flex eka xigwitsirisi xa flex lexi nga na switirhisiwa swa nkongomiso. Hi xitalo u nga tshika tlilasi ya horizontal laha tani hi leswi browser default yi nga row. Hambiswiritano, u nga ha hlangana na swiyimo laha a wu lava ku veka hi ku kongoma ntikelo lowu (ku fana na swivumbeko leswi hlamulaka).

Tirhisa .flex-rowku veka ndlela leyi nga etlhelo (xihlawulekisi xa browser), kumbe .flex-row-reverseku sungula ndlela leyi nga etlhelo ku suka eka tlhelo leri hambaneke.

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

Tirhisa .flex-columnku veka ndlela yo yima, kumbe .flex-column-reverseku sungula ndlela yo yima ku suka eka tlhelo leri hambaneke.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Ku lulamisa leswi nga endzeni

Tirhisa justify-contentswitirhisiwa eka swikhomela-ndhawu swa flexbox ku cinca ku ringanana ka swilo swa flex eka axis leyikulu (x-axis ku sungula, y-axis loko flex-direction: column). Hlawula eka start(xihlawulekisi xa xihlamusela-marito), end, center, between, around, kumbe 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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Lulamisa swilo

Tirhisa align-itemsswitirhisiwa eka swikhomela-ndhawu swa flexbox ku cinca ku ringanana ka swilo swa flex eka cross axis (y-axis ku sungula, x-axis loko flex-direction: column). Hlawula eka start, end, center, baseline, kumbe stretch(xihlawulekisi xa xihlamusela-marito).

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Lulamisa ku tiyimisela

Tirhisa align-selfswitirhisiwa eka swilo swa flexbox ku cinca hi swoxe ku ringanana ka swona eka cross axis (y-axis ku sungula, x-axis loko flex-direction: column). Hlawula eka swihlawulekisi leswi fanaka na align-items: start, end, center, baseline, kumbe 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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Tata

Tirhisa .flex-filltlilasi eka nxaxamelo wa swiaki swa vamakwavo ku swi sindzisa ku va ku anama loku ringanaka na nhundzu ya swona (kumbe ku anama loku ringanaka loko nhundzu ya vona yi nga hundzi mabokisi ya vona ya ndzilakano) loko u ri karhi u teka ndhawu hinkwayo leyi nga kona ya horizontal.

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

Ku hambana loku hlamulaka na kona ku kona eka flex-fill.

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

Kula u tlhela u hunguteka

Tirhisa .flex-grow-*switirhisiwa ku cinca-cinca vuswikoti bya nchumu wa flex byo kula ku tata ndhawu leyi nga kona. Eka xikombiso lexi nga laha hansi, .flex-grow-1swiaki swi tirhisa ndhawu hinkwayo leyi nga kona leyi yi nga yi kotaka, loko yi ri karhi yi pfumelela swilo swimbirhi leswi saleke swo olova ndhawu ya swona leyi lavekaka.

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

Tirhisa .flex-shrink-*switirhisiwa ku cinca-cinca vuswikoti bya nchumu wo flex byo hunguteka loko swi laveka. Eka xikombiso lexi nga laha hansi, nchumu wa vumbirhi lowu flex lowu nga ni .flex-shrink-1wu sindzisiwa ku phutsela leswi nga endzeni ka wona eka layini leyintshwa, wu “hunguteka” leswaku wu pfumelela ndhawu yo tala eka nchumu lowu hundzeke lowu flex lowu nga ni .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>

Ku hambana loku hlamulaka na kona ku kona eka 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
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

Ti margin ta movha

Flexbox yi nga endla swilo swo saseka swo hlamarisa loko u hlanganisa ti-flex alignments na ti auto margins. Laha hansi ku kombisiwile swikombiso swinharhu swa ku lawula swilo leswi flex hi ku tirhisa ti-auto margin: default (ku hava auto margin), ku susumeta swilo swimbirhi exineneni ( .me-auto), ni ku susumeta swilo swimbirhi eximatsini ( .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>

Hi ku ringanisa-swilo

Yisa nchumu wun’we lowu olovisiweke hi ndlela yo yima ehenhla kumbe ehansi ka xigwitsirisi hi ku hlanganisa align-items, flex-direction: column, na margin-top: autokumbe 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>

Phutsela

Cinca ndlela leyi swilo leswi flex swi phutselaka ha yona eka xigwitsirisi xo flex. Hlawula eka ku pfumala ku phutsela nikatsongo (ku phutsela ka xihlamusela-marito) hi .flex-nowrap, ku phutsela hi .flex-wrap, kumbe ku phutsela endzhaku hi .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>

Ku hambana loku hlamulaka na kona ku kona eka 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

Xileriso

Cinca ku landzelelana loku voniwaka ka swilo swo karhi swa flex hi switirhisiwa swi nga ri swingani order. Hi nyika ntsena swihlawulekisi swo endla nchumu wo sungula kumbe wo hetelela, xikan’we na ku tlheriseriwa endzhaku ku tirhisa oda ya DOM. Tanihi leswi orderswi tekaka ntikelo wihi na wihi wa nhlayo leyi heleleke ku suka eka 0 ku ya eka 5, engetela CSS ya ntolovelo eka mimpimo yihi na yihi yo engetela leyi lavekaka.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Ku engetela kwalaho ku tlhela ku va na ti responsive .order-firstna .order-lasttitlilasi leti cincaka the orderya elemente hi ku tirhisa order: -1na order: 6, hi ku landzelelana.

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

Lulamisa leswi nga endzeni

Tirhisa align-contentswitirhisiwa eka swibye swa flexbox ku ringanisa swilo swo flex swin’we eka cross axis. Hlawula eka start(xihlawulekisi xa xihlamusela-marito), end, center, between, around, kumbe stretch. Ku kombisa switirhisiwa leswi, hi sindzisile flex-wrap: wrapno engetela nhlayo ya swilo swa flex.

Tinhloko ta le henhla! Nhundzu leyi a yi na vuyelo eka tilayini tin’we ta swilo swo olova.

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

Ku hambana loku hlamulaka na kona ku kona eka 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

Nchumu wa vuhangalasi bya mahungu

U lava ku phindha xiphemu xa nchumu wa midiya ku suka eka Bootstrap 4? Yi vumbe nakambe hi nkarhi wo koma hi switirhisiwa swi nga ri swingani swo olova leswi pfumelelaka ku cinca-cinca lokukulu swinene ni ku cinca-cinca ku tlula eku sunguleni.

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

Naswona u vula leswaku u lava ku veka swilo leswi nga endzeni hi ndlela leyi yimisiweke ekusuhi ni xifaniso:

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

Switirhisiwa swa Flexbox swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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