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 display
Utiliti pikeun nyieun wadah flexbox sarta transformasi elemen barudak langsung kana item flex. Wadah fleksibel sareng barang-barang tiasa dirobih deui kalayan sipat flex tambahan.
Variasi responsif ogé aya pikeun .d-flex
na .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-row
pikeun nyetel arah horizontal (standar browser), atawa .flex-row-reverse
pikeun ngamimitian arah horizontal ti sisi sabalikna.
Anggo .flex-column
pikeun nyetél arah nangtung, atanapi .flex-column-reverse
ngamimitian arah vertikal ti sisi sabalikna.
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-content
Utiliti 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
.
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-items
Utiliti 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).
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-self
Utiliti 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).
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-fill
kelas 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.
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-1
elemen ngagunakeun sagala spasi sadia eta bisa, bari sahingga sésana dua item flex spasi maranéhna diperlukeun.
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-1
kapaksa mungkus eusina kana garis anyar, "nyusut" pikeun ngidinan leuwih spasi pikeun item flex saméméhna kalawan .w-100
.
Variasi responsif ogé aya pikeun flex-grow
na 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.
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: auto
atawa margin-bottom: auto
.
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
.
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 order
Utiliti. Urang ukur nyadiakeun pilihan pikeun nyieun hiji item mimiti atawa panungtungan, kitu ogé reset ngagunakeun urutan DOM. Salaku order
nyokot sagala nilai integer (misalna, 5
), tambahkeun CSS custom pikeun sagala nilai tambahan diperlukeun.
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-content
Utiliti 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: wrap
sareng ningkatkeun jumlah barang fleksibel.
Mastaka tegak! Sipat ieu teu aya pangaruhna kana baris tunggal barang fleksibel.
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