Flex

Pab kom flex cwj pwm

Siv displaycov khoom siv hluav taws xob los tsim lub thawv flexbox thiab hloov cov ntsiab lus ntawm cov menyuam yaus rau hauv cov khoom flex. Flex ntim thiab cov khoom tuaj yeem hloov kho ntxiv nrog cov khoom flex ntxiv.

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

Teb variations kuj muaj rau .d-flexthiab .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

Kev taw qhia

Teem cov kev taw qhia ntawm cov khoom flex nyob rau hauv ib lub thawv flex nrog cov khoom siv kev taw qhia. Feem ntau koj tuaj yeem tshem tawm cov chav kawm kab rov tav ntawm no raws li qhov browser default yog row. Txawm li cas los xij, koj tuaj yeem ntsib cov xwm txheej uas koj xav tau los teeb tsa tus nqi no (xws li cov lus teb layouts).

Siv .flex-rowlos teeb tsa kab rov tav kev taw qhia (qhov browser default), lossis .flex-row-reversepib txoj kab rov tav los ntawm sab nraud.

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

Siv .flex-columnlos teeb tsa txoj kab ntsug, lossis .flex-column-reversepib txoj kab ntsug ntawm sab nraud.

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

Teb variations kuj muaj rau 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

Txhim kho cov ntsiab lus

Siv justify-contentcov khoom siv hluav taws xob ntawm flexbox ntim los hloov cov kev sib tw ntawm cov khoom flex ntawm lub ntsiab axis (x-axis pib, y-axis yog flex-direction: column). Xaiv los ntawm start(browser default), end, center, between, around, lossis 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>

Teb variations kuj muaj rau 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

Kho cov khoom

Siv align-itemscov khoom siv hluav taws xob ntawm cov thawv flexbox los hloov cov kev sib tw ntawm cov khoom flex ntawm tus ntoo khaub lig axis (y-axis pib, x-axis yog flex-direction: column). Xaiv los ntawm start, end, center, baseline, lossis stretch(browser default).

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

Teb variations kuj muaj rau 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

Kho tus kheej

Siv align-selfcov khoom siv hluav taws xob ntawm cov khoom flexbox los hloov lawv cov kev sib tw ntawm tus ntoo khaub lig axis (y-axis pib, x-axis yog flex-direction: column). Xaiv los ntawm tib cov kev xaiv xws li align-items: start, end, , center, baseline, lossis 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>

Teb variations kuj muaj rau 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

Sau

Siv cov .flex-fillchav kawm ntawm cov nus muag cov ntsiab lus kom yuam lawv mus rau hauv qhov dav sib npaug ntawm lawv cov ntsiab lus (lossis qhov dav sib npaug yog tias lawv cov ntsiab lus tsis dhau lawv cov thawv ciam teb) thaum noj tag nrho cov chaw kab rov tav.

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

Teb variations kuj muaj rau flex-fill.

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

Loj hlob thiab ntsws

Siv .flex-grow-*cov khoom siv hluav taws xob los hloov cov khoom flex lub peev xwm loj hlob los sau qhov chaw muaj. Hauv qhov piv txwv hauv qab no, cov .flex-grow-1ntsiab lus siv txhua qhov chaw uas nws tuaj yeem ua tau, thaum tso cai rau ob qho khoom flex ntxiv lawv qhov chaw tsim nyog.

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

Siv .flex-shrink-*cov khoom siv hluav taws xob los hloov cov khoom flex lub peev xwm kom ntsws yog tias tsim nyog. Hauv qhov piv txwv hauv qab no, qhov thib ob flex khoom nrog .flex-shrink-1raug yuam kom qhwv nws cov ntsiab lus rau ib kab tshiab, "shrinking" kom tso cai rau ntau qhov chaw rau cov khoom flex yav dhau los nrog .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>

Teb variations kuj muaj rau flex-growthiab 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

Nws pib margins

Flexbox tuaj yeem ua qee yam zoo nkauj heev thaum koj sib xyaw flex kev sib raug zoo nrog cov npoo pib. Hauv qab no yog peb qhov piv txwv ntawm kev tswj cov khoom flex ntawm nws pib margins: lub neej ntawd (tsis muaj qhov pib pib), thawb ob yam khoom mus rau sab xis ( .me-auto), thiab thawb ob yam khoom mus rau sab laug ( .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>

Nrog cov khoom sib dhos

Vertically txav ib yam khoom flex mus rau saum lossis hauv qab ntawm lub thawv los ntawm kev sib xyaw align-items, flex-direction: column, thiab margin-top: autolossis 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>

Qhwv

Hloov cov khoom flex li cas qhwv hauv lub thawv flex. Xaiv los ntawm tsis muaj wrapping txhua (qhov browser default) nrog .flex-nowrap, wrapping nrog .flex-wrap, lossis thim rov qab wrapping nrog .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>

Teb variations kuj muaj rau 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

Kev txiav txim

Hloov qhov pom kev txiav txim ntawm cov khoom flex tshwj xeeb nrog ib txhais tes ntawm ordercov khoom siv. Peb tsuas yog muab kev xaiv rau kev ua ib yam khoom ua ntej lossis zaum kawg, nrog rau kev rov pib siv DOM xaj. Raws li orderyuav siv cov lej lej ntawm 0 txog 5, ntxiv kev cai CSS rau ib qho txiaj ntsig ntxiv uas xav tau.

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

Teb variations kuj muaj rau 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

Tsis tas li ntawd kuj tseem muaj cov lus teb .order-firstthiab .order-lastcov chav kawm uas hloov cov orderntsiab lus los ntawm kev thov order: -1thiab order: 6, feem.

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

Hloov cov ntsiab lus

Siv align-contentcov khoom siv hluav taws xob ntawm cov thawv flexbox txhawm rau kho cov khoom flex ua ke ntawm tus ntoo khaub lig. Xaiv los ntawm start(browser default), end, center, between, around, lossis stretch. Txhawm rau ua kom pom cov khoom siv hluav taws xob no, peb tau tswj hwm flex-wrap: wrapthiab nce tus naj npawb ntawm cov khoom flex.

Tau taub hau! Cov cuab yeej no tsis cuam tshuam rau ib kab ntawm cov khoom 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>

Teb variations kuj muaj rau 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

Media khoom

Nrhiav kom rov ua dua cov khoom siv xov xwm los ntawm Bootstrap 4? Rov ua dua nws tsis muaj sij hawm nrog ob peb flex utilities uas tso cai txawm ntau yooj thiab customization dua ua ntej.

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

Thiab hais tias koj xav vertically nruab nrab cov ntsiab lus ntawm ib sab ntawm daim duab:

<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

Utilities API

Flexbox cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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