Flexbox CSS

1
2
3
4
5
6
7
8

亲自试一试

Modul tata letak Flexbox CSS

Sebelum modul tata letak Flexbox (diterbitkan), modus tata letak yang tersedia adalah empat jenis berikut:

  • Blok (Block), digunakan untuk bagian (bagian) di halaman web
  • Dalam baris (Inline), digunakan untuk teks
  • Tabel, digunakan untuk data tabel dua dimensi
  • Penempatan, digunakan untuk lokasi jelas elemen

Modul tata letak bingkai fleksibel, dapat merancang struktur tata letak responsif yang fleksibel dengan mudah tanpa memerlukan floating atau penempatan.

Pendukung pelayar

Semua pelayar modern mendukung flexbox Atribut.

29.0 11.0 22.0 10 48

Elemen Flexbox

Jika hendak memulai penggunaan model Flexbox, anda perlu pertama-tama menentukan kontainer Flex.

1
2
3

Elemen di atas mewakili kontainer flex yang memiliki tiga item flex (area biru).

实例

Kontainer flex yang mengandung tiga item flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

亲自试一试

Elemen induk (kontainer)

Dengan memasukkan display Atribut diatur menjadi flexKontainer flex akan dapat disusun:

1
2
3

实例

.flex-container {
  display: flex;
}

亲自试一试

Berikut adalah atribut kontainer flex:

Properti flex-direction

flex-direction Atribut menentukan arah yang akan digunakan untuk menata item flex di kontainer.

1
2
3

实例

column Nilai menata item flex secara vertikal (dari atas ke bawah):

.flex-container {
  display: flex;
  flex-direction: column;
}

亲自试一试

实例

column-reverse Nilai menata item flex secara vertikal (tetapi dari bawah ke atas):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

亲自试一试

实例

row Nilai menata item flex secara horizontal (dari kiri ke kanan):

.flex-container {
  display: flex;
  flex-direction: row;
}

亲自试一试

实例

row-reverse Nilai menata item flex secara horizontal (tetapi dari kanan ke kiri):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

亲自试一试

Properti flex-wrap

flex-wrap Atribut menentukan apakah item flex harus berubah baris atau tidak.

Contoh di bawah mengandung 12 item flex untuk memperlihatkan atribut flex-wrap dengan baik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实例

wrap Nilai menentukan bahwa item flex akan berubah baris jika perlu:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

亲自试一试

实例

nowrap Nilai menentukan bahwa item flex tidak akan berubah baris (baku):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

亲自试一试

实例

wrap-reverse Nilai menentukan jika item elasti harus berubah baris dengan urutan sebaliknya jika perlu:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

亲自试一试

Properti flex-flow

flex-flow Atribut adalah singkatan untuk mengatur atribut flex-direction dan flex-wrap secara bersamaan.

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

亲自试一试

Properti justify-content

justify-content Atribut digunakan untuk menaruh item flex:

1
2
3

实例

center Nilai akan menaruh item flex di tengah kontainer:

.flex-container {
  display: flex;
  justify-content: center;
}

亲自试一试

实例

flex-start Nilai akan menaruh item flex di awal kontainer (baku):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

亲自试一试

实例

flex-end Nilai akan menaruh item flex di ujung kontainer:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

亲自试一试

实例

space-around Nilai menunjukkan item flex yang mempunyai spasi di sebelum, di antara, dan setelah baris:

.flex-container {
  display: flex;
  justify-content: space-around;
}

亲自试一试

实例

space-between Nilai menunjukkan item flex yang mempunyai spasi di antara baris:

.flex-container {
  display: flex;
  justify-content: space-between;
}

亲自试一试

Properti align-items

align-items Atribut digunakan untuk mengatur penjajaran item flex secara vertikal.

1
2
3

Dalam contoh ini, kami menggunakan kontainer tinggi 200 piksel untuk memperlihatkan atribut align-items dengan baik.

实例

center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

亲自试一试

实例

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

亲自试一试

实例

flex-end 值将弹性项目在容器底部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

亲自试一试

实例

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

亲自试一试

实例

baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

亲自试一试

注意：该例使用不同的 font-size 来演示项目已按文本基线对齐：

1
2
3
4

Properti align-content

align-content 属性用于对齐弹性线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这些例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

实例

space-between 值显示的弹性线之间有相等的间距：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

亲自试一试

实例

space-around 值显示弹性线在其之前、之间和之后带有空格：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

亲自试一试

实例

stretch 值拉伸弹性线以占据剩余空间（默认）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

亲自试一试

实例

center 值在容器中间显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

亲自试一试

实例

flex-start 值在容器开头显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

亲自试一试

实例

flex-end 值在容器的末尾显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

亲自试一试

完美的居中

在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。

解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

亲自试一试

子元素（项目）

直接子元素会自动成为弹性（flex）项目。

1
2
3
4

Elemen di atas mewakili empat objek elasthan biru di dalam kontainer elasthan abu-abu.

实例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

亲自试一试

Sifat yang digunakan untuk objek elasthan adalah:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Sifat order

order Sifat menentukan urutan objek flex.

1
2
3
4

Objek flex pertama di dalam kode tidak mesti ditampilkan sebagai item pertama dalam tata letak.

order Nilai mesti berupa angka, nilai baku adalah 0.

实例

order Sifat dapat mengubah urutan objek flex.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

亲自试一试

Sifat flex-grow

flex-grow Sifat menentukan berapa banyak pertumbuhan yang akan terjadi bagi objek flex terhadap objek flex lain.

1
2
3

Nilai ini mesti berupa angka, nilai baku adalah 0.

实例

Jadikan kecepatan pertumbuhan objek elasthan ketiga 8 kali lebih cepat daripada objek elasthan lain:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

亲自试一试

Sifat flex-shrink

flex-shrink Sifat menentukan berapa banyak pengecilan yang akan terjadi bagi objek flex terhadap objek flex lain.

1
2
3
4
5
6
7
8
9

Nilai ini mesti berupa angka, nilai baku adalah 0.

实例

Jangan biarkan objek elasthan ketiga mengecil sejumlah yang sama dengan objek elasthan lain:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

亲自试一试

Sifat flex-basis

flex-basis Sifat menentukan panjang asal objek flex.

1
2
3
4

实例

Atur panjang asal objek elasthan ketiga menjadi 200 piksel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

亲自试一试

Sifat flex

flex Sifat adalah singkatan sifat flex-grow, flex-shrink dan flex-basis.

实例

Jadikan objek elasthan ketiga tidak dapat bertumbuh (0), tidak dapat mengecil (0), dan panjang asal adalah 200 piksel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

亲自试一试

Sifat align-self

align-self Pengaturan sifat menentukan cara penyesuaian objek yang dipilih dalam kontainer elasthan.

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1
2
3
4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

亲自试一试

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

亲自试一试

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

亲自试一试

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

亲自试一试

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性 描述
display 规定用于 HTML 元素的盒类型。
flex-direction 规定弹性容器内的弹性项目的方向。
justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow flex-direction 及 flex-wrap 的简写属性。
order 规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self 用于弹性项目。覆盖容器的 align-items 属性。
flex 属性 flex-grow、flex-shrink 及 flex-basis 的简写。