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.

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

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.

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

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

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

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

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

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

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.

<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 jeung .flex-shrink-1kapaksa mungkus eusina ka garis anyar, "nyusut" pikeun ngidinan leuwih spasi pikeun item flex saméméhna kalawan .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>

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.

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

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

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

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

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

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

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

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