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">I'm a flexbox container!</div>

Abdi wadah flexbox inline!

<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

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

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

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

<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

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

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. Tingali jawaban StackOverflow ieu kanggo langkung rinci.

Item fleksibel

<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-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

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

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