in English

Flex

Gancang ngatur perenah, alignment, sareng ukuran kolom grid, navigasi, komponén, sareng seueur deui kalayan suite pinuh ku utilitas flexbox responsif. Pikeun palaksanaan anu langkung kompleks, CSS khusus tiasa diperyogikeun.

Dina kaca ieu

Aktipkeun paripolah flex

Larapkeun displayUtiliti pikeun nyieun wadah flexbox sarta transformasi elemen barudak langsung kana item flex. Wadah fleksibel sareng barang-barang tiasa dirobih deui kalayan sipat flex tambahan.

Abdi wadah flexbox!

html

<div class="d-flex p-2">I'm a flexbox container!</div>

Abdi wadah flexbox inline!

html

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Variasi responsif ogé aya pikeun .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

Arah

Nyetél arah barang flex dina wadah flex jeung utiliti arah. Dina kalolobaan kasus anjeun tiasa ngaleungitkeun kelas horizontal di dieu salaku standar browser nyaéta row. Nanging, anjeun tiasa mendakan kaayaan dimana anjeun kedah nyetél nilai ieu sacara eksplisit (sapertos perenah responsif).

Paké .flex-rowpikeun nyetel arah horizontal (standar browser), atawa .flex-row-reversepikeun ngamimitian arah horizontal ti sisi sabalikna.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

html

<div class="d-flex flex-row mb-3">
  <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>

Anggo .flex-columnpikeun nyetél arah nangtung, atanapi .flex-column-reversengamimitian arah vertikal ti sisi sabalikna.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

html

<div class="d-flex flex-column mb-3">
  <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>

Variasi responsif ogé aya pikeun 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

Benerkeun eusi

Paké justify-contentUtiliti on peti flexbox pikeun ngarobah alignment item flex dina sumbu utama (sumbu-x pikeun ngamimitian, sumbu-y lamun flex-direction: column). Pilih tina start(standar browser), end, center, between, around, atawa evenly.

Item fleksibel

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

Variasi responsif ogé aya pikeun 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

Nyaluyukeun item

Paké align-itemsUtiliti on peti flexbox pikeun ngarobah alignment item flex dina sumbu cross (sumbu-y pikeun ngamimitian, x-sumbu lamun flex-direction: column). Pilih tina start, end, center, baseline, atawa stretch(standar browser).

Item fleksibel

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

Variasi responsif ogé aya pikeun 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

Ngajajarkeun diri

Paké align-selfUtiliti on item flexbox pikeun individual ngarobah alignment maranéhanana dina sumbu cross (sumbu-y pikeun ngamimitian, x-sumbu lamun flex-direction: column). Pilih tina pilihan anu sami sareng align-items: start, end, center, baseline, atanapi stretch(standar browser).

Item fleksibel

Item flex dijajarkeun

Item fleksibel

Item flex dijajarkeun

Item fleksibel

Item flex dijajarkeun

Item fleksibel

Item flex dijajarkeun

Item fleksibel

Item flex dijajarkeun

Item fleksibel

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

Variasi responsif ogé aya pikeun 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

eusian

Anggo .flex-fillkelas dina runtuyan elemen duduluran pikeun maksakeun kana lebar anu sami sareng eusina (atanapi lebar anu sami upami eusina henteu ngaleuwihan kotak watesna) bari nyandak sadaya rohangan horizontal anu sayogi.

Item Flex kalawan loba eusi

Item fleksibel

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Variasi responsif ogé aya pikeun flex-fill.

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

Tumuwuh jeung ngaleutikan

Anggo .flex-grow-*utilitas pikeun togél kamampuan barang fleksibel pikeun tumbuh pikeun ngeusian rohangan anu sayogi. Dina conto di handap, .flex-grow-1elemen ngagunakeun sagala spasi sadia eta bisa, bari sahingga sésana dua item flex spasi maranéhna diperlukeun.

Item fleksibel

Item flex katilu

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Anggo .flex-shrink-*utilitas pikeun togél kamampuan barang anu fleksibel pikeun ngaleutikan upami diperyogikeun. Dina conto di handap, item flex kadua jeung .flex-shrink-1kapaksa mungkus eusina ka garis anyar, "nyusut" pikeun ngidinan leuwih spasi pikeun item flex saméméhna kalawan .w-100.

Item fleksibel

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Variasi responsif ogé aya pikeun 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

Margin otomatis

Flexbox tiasa ngalakukeun sababaraha hal anu saé nalika anjeun nyampur alignment flex sareng margin otomatis. Ditémbongkeun di handap aya tilu conto ngadalikeun item flex via margins otomatis: standar (euweuh margin otomatis), nyorong dua item ka katuhu ( .me-auto), sarta nyorong dua item ka kénca ( .ms-auto).

Item fleksibel

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Kalawan align-item

Pindahkeun hiji barang lentur sacara vertikal ka luhur atawa ka handap wadahna ku cara nyampur align-items, flex-direction: column, jeung margin-top: autoatawa margin-bottom: auto.

Item fleksibel

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

Bungkus

Ngarobah kumaha flex barang mungkus dina wadah flex. Pilih tina euweuh wrapping pisan (standar browser) kalawan .flex-nowrap, wrapping kalawan .flex-wrap, atawa balik wrapping kalawan .flex-wrap-reverse.

Item fleksibel

<div class="d-flex flex-nowrap">
  ...
</div>

Item fleksibel

<div class="d-flex flex-wrap">
  ...
</div>

Item fleksibel

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Variasi responsif ogé aya pikeun 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

pesenan

Ngarobah urutan visual item flex husus kalawan sakeupeul orderUtiliti. Urang ukur nyadiakeun pilihan pikeun nyieun hiji item mimiti atawa panungtungan, kitu ogé reset ngagunakeun urutan DOM. Salaku ordernyokot sagala nilai integer ti 0 nepi ka 5, tambahkeun CSS custom pikeun sagala nilai tambahan diperlukeun.

Item flex munggaran

Item flex kadua

Item flex katilu

html

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

Variasi responsif ogé aya pikeun 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

Salaku tambahan, aya ogé kelas responsif .order-firstsareng .order-lastanu ngarobih orderunsur ku cara nerapkeun order: -1sareng order: 6masing-masing.

.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

Nyaluyukeun eusi

Paké align-contentUtiliti on peti flexbox mun align item flex babarengan dina sumbu cross. Pilih tina start(standar browser), end, center, between, around, atawa stretch. Pikeun nunjukkeun utilitas ieu, kami parantos ngalaksanakeun flex-wrap: wrapsareng ningkatkeun jumlah barang anu fleksibel.

Mastaka tegak! Sipat ieu teu aya pangaruhna kana baris tunggal barang fleksibel.

Item fleksibel

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Item fleksibel

<div class="d-flex align-content-end flex-wrap">...</div>

Item fleksibel

<div class="d-flex align-content-center flex-wrap">...</div>

Item fleksibel

<div class="d-flex align-content-between flex-wrap">...</div>

Item fleksibel

<div class="d-flex align-content-around flex-wrap">...</div>

Item fleksibel

<div class="d-flex align-content-stretch flex-wrap">...</div>

Variasi responsif ogé aya pikeun align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

objék média

Pilari pikeun ngayakeun réplikasi komponén objék média tina Bootstrap 4? Nyiptakeun deui dina waktos anu lami sareng sababaraha utilitas fleksibel anu ngamungkinkeun langkung kalenturan sareng kustomisasi tibatan sateuacanna.

Ieu sababaraha eusi tina komponén média. Anjeun tiasa ngagentos ieu ku eusi naon waé sareng saluyukeun upami diperyogikeun.

html

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

Sareng ucapkeun anjeun hoyong vertikal ngapusatkeun eusi di gigireun gambar:

Ieu sababaraha eusi tina komponén média. Anjeun tiasa ngagentos ieu ku eusi naon waé sareng saluyukeun upami diperyogikeun.

html

<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

Utiliti API

Utiliti Flexbox dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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