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.
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
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
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
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
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
Anggo .flex-fill
kelas 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.
Variasi responsif ogé aya pikeun flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
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 perlu.
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
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.
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
.
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
Ngarobah urutan visual item flex husus kalawan sakeupeul order
Utiliti. Urang ngan nyadiakeun pilihan pikeun nyieun hiji item kahiji 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
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 anu 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