Source

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.

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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Abdi wadah flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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, atawa around.

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

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

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

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 fleksibel
Item flex dijajarkeun
Item fleksibel
Item fleksibel
Item flex dijajarkeun
Item fleksibel
Item fleksibel
Item flex dijajarkeun
Item fleksibel
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

eusian

Anggo .flex-fillkelas dina séri elemen sibling pikeun maksakeun kana lebar anu sami bari nyandak sadaya rohangan horizontal anu sayogi. Utamana mangpaat pikeun sarua-lebar, atawa diyakinkeun, navigasi.

Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">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

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

Item fleksibel
Item fleksibel
Item flex katilu
<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>

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

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

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

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 ( .mr-auto), sarta nyorong dua item ka kénca ( .ml-auto).

Hanjakalna, IE10 sareng IE11 henteu leres ngadukung margin otomatis dina barang flex anu indungna gaduh nilai non-standar justify-content. Tempo jawaban StackOverflow ieu pikeun leuwih rinci.

Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<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="mr-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="ml-auto p-2 bd-highlight">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
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<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>

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
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex flex-nowrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex flex-wrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
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

pesenan

Ngarobah urutan visual item flex husus kalawan sakeupeul orderUtiliti. Urang ngan nyadiakeun pilihan pikeun nyieun hiji item kahiji atawa panungtungan, kitu ogé reset ngagunakeun urutan DOM. Salaku ordernyokot sagala nilai integer (misalna, 5), tambahkeun CSS custom pikeun sagala nilai tambahan diperlukeun.

Item flex munggaran
Item flex kadua
Item flex katilu
<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>

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

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
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-end flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-center flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-between flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-around flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
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-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