Source

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.

Aktifake prilaku fleksibel

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.

Aku wadhah flexbox!
<div class="d-flex p-2">I'm a flexbox container!</div>
Aku wadhah flexbox inline!
<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

arah

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.

Fleksibel item 1
Fleksibel item 2
Fleksibel item 3
Fleksibel item 1
Fleksibel item 2
Fleksibel 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>

Gunakake .flex-columnkanggo nyetel arah vertikal, utawa .flex-column-reversekanggo miwiti arah vertikal saka sisih ngelawan.

Fleksibel item 1
Fleksibel item 2
Fleksibel item 3
Fleksibel item 1
Fleksibel item 2
Fleksibel 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 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

Mbenerake isi

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.

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

Selarasake item

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

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

Selarasake dhewe

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

Item fleksibel
Item fleksibel selaras
Item fleksibel
Item fleksibel
Item fleksibel selaras
Item fleksibel
Item fleksibel
Item fleksibel selaras
Item fleksibel
Item fleksibel
Item fleksibel selaras
Item fleksibel
Item fleksibel
Item fleksibel selaras
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 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

Margin otomatis

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.

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

Kanthi align-item

Pindhah vertikal siji item lentur menyang ndhuwur utawa ngisor wadhah kanthi nyampur align-items, flex-direction: column, lan margin-top: autoutawa margin-bottom: auto.

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

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.

Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex flex-nowrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex flex-wrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<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

dhawuh

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.

Item fleksibel pisanan
Item fleksibel kapindho
Item fleksibel katelu
<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

Selarasake isi

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.

Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-end flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-center flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-between flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<div class="d-flex align-content-around flex-wrap">...</div>
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
Item fleksibel
<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