Fleksibel
Ngatur tata letak, alignment, lan ukuran kolom kothak, navigasi, komponen, lan liya-liyane kanthi lengkap kanthi lengkap karo utilitas flexbox responsif. Kanggo implementasi sing luwih rumit, CSS khusus bisa uga dibutuhake.
Aplikasi displaykeperluan kanggo nggawe wadhah flexbox lan ngowahi unsur anak langsung menyang item lentur. Wadah lan barang fleksibel bisa diowahi luwih lanjut kanthi sifat fleksibel tambahan.
<div class="d-flex p-2">I'm a flexbox container!</div><div class="d-inline-flex p-2">I'm an inline flexbox container!</div>Variasi responsif uga ana kanggo .d-flexlan .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
Setel arah item lentur ing wadhah lentur kanthi utilitas arah. Ing sawetara kasus, sampeyan bisa ngilangi kelas horisontal ing kene amarga standar browser yaiku row. Nanging, sampeyan bisa uga nemoni kahanan nalika sampeyan kudu nyetel nilai kasebut kanthi jelas (kayata tata letak responsif).
Gunakake .flex-rowkanggo nyetel arah horisontal (standar browser), utawa .flex-row-reversekanggo miwiti arah horisontal saka sisih ngelawan.
<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>Gunakake .flex-columnkanggo nyetel arah vertikal, utawa .flex-column-reversekanggo miwiti arah vertikal saka sisih ngelawan.
<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 uga ana kanggo 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
Gunakake justify-contentutilitas ing wadhah flexbox kanggo ngganti alignment item fleksibel ing sumbu utama (sumbu x kanggo miwiti, sumbu y yen flex-direction: column). Pilih saka start(standar browser), end, center, between, utawa 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 uga ana kanggo 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
Gunakake align-itemsutilitas ing wadhah flexbox kanggo ngganti alignment item lentur ing sumbu salib (sumbu y kanggo miwiti, sumbu x yen flex-direction: column). Pilih saka start, end, center, baseline, utawa 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 uga ana kanggo 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
Gunakake align-selfutilitas ing item flexbox kanggo ngganti alignment individu ing sumbu salib (sumbu y kanggo miwiti, sumbu x yen flex-direction: column). Pilih saka opsi sing padha karo align-items: start, end, center, baseline, utawa 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 uga ana kanggo 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
Flexbox bisa nindakake sawetara perkara sing apik tenan nalika sampeyan nyampur alignment fleksibel karo wates otomatis. Ditampilake ing ngisor iki ana telung conto ngontrol item fleksibel liwat wates otomatis: standar (ora ana wates otomatis), meksa rong item ing sisih tengen ( .mr-auto), lan meksa rong item ing sisih kiwa ( .ml-auto).
Sayange, IE10 lan IE11 ora ndhukung margin otomatis kanthi bener ing item fleksibel sing induke nduweni nilai non-standar justify-content. Waca jawaban StackOverflow iki kanggo rincian liyane.
<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>Pindhah vertikal siji item lentur menyang ndhuwur utawa ngisor wadhah kanthi nyampur align-items, flex-direction: column, lan margin-top: autoutawa margin-bottom: auto.
<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>Ngganti carane lentur item mbungkus ing wadhah lentur. Pilih saka ora ana bungkus (standar browser) nganggo .flex-nowrap, bungkus nganggo .flex-wrap, utawa bungkus mbalikke nganggo .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 uga ana kanggo 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
Ngganti urutan visual item fleksibel tartamtu kanthi sawetara orderutilitas. Kita mung menehi pilihan kanggo nggawe item pisanan utawa pungkasan, uga reset kanggo nggunakake urutan DOM. Minangka ordernjupuk sembarang nilai integer (contone, 5), nambah CSS adat kanggo sembarang nilai tambahan needed.
<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 uga ana kanggo 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
Gunakake align-contentutilitas ing wadhah flexbox kanggo nyelarasake item lentur bebarengan ing sumbu salib. Pilih saka start(standar browser), end, center, between, around, utawa stretch. Kanggo nduduhake utilitas kasebut, kita wis ngetrapake flex-wrap: wraplan nambah jumlah barang fleksibel.
Kepala munggah! Properti iki ora duwe pengaruh ing baris tunggal item 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 uga ana kanggo 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