Penjelasan terperinci tentang penggunaan dan kesan setiap atribut dalam susun atur elastik CSS Flex

Penjelasan terperinci tentang penggunaan dan kesan setiap atribut dalam Reka Letak Fleksibel CSS

Dalam pembangunan web, reka letak fleksibel (Flexbox) telah menjadi kaedah reka letak yang biasa digunakan. Ia boleh menyelesaikan masalah penjajaran dan susun atur elemen dalam bekas dengan berkesan, supaya halaman web boleh memberikan kesan yang baik pada saiz skrin yang berbeza. Artikel ini akan menerangkan secara terperinci penggunaan dan kesan setiap atribut dalam reka letak anjal CSS Flex.

1. Atribut arah lentur

Atribut arah lentur digunakan untuk menetapkan arah paksi utama dalam bekas fleksibel. Paksi utama merujuk kepada arah mendatar atau menegak dalam bekas lentur. Atribut flex-direction mempunyai empat nilai pilihan: baris, baris-terbalik, lajur dan lajur-terbalik.

1. baris: Nilai lalai, paksi utama adalah mendatar dan sub-elemen disusun secara mendatar.
2. baris-terbalik: Paksi utama adalah mendatar, dan sub-elemen disusun secara mendatar dalam susunan terbalik.
3. lajur: Paksi utama adalah menegak, dan sub-elemen disusun secara menegak.
4. lajur-terbalik: Paksi utama adalah menegak, dan sub-elemen disusun secara menegak dalam susunan terbalik.

Contoh kod:

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向，子元素水平排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 主轴为水平方向，子元素水平反向排列 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 主轴为垂直方向，子元素垂直排列 */
}

.container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 主轴为垂直方向，子元素垂直反向排列 */
}

2. Atribut justify-content

Atribut justify-content digunakan untuk menetapkan penjajaran sub-elemen dalam bekas elastik pada paksi utama. Ia mempunyai lima nilai pilihan: flex-start, flex-end, tengah, ruang-antara dan ruang-keliling.

1. flex-start: Elemen kanak-kanak dijajarkan pada titik permulaan paksi utama.
2. flex-end: elemen kanak-kanak dijajarkan pada hujung paksi utama.
3. pusat: Elemen kanak-kanak dijajarkan di tengah paksi utama.
4. ruang-antara: Elemen kanak-kanak diagihkan sama rata pada paksi utama, tanpa ruang antara permulaan dan penghujung.
5. ruang sekeliling: Elemen kanak-kanak diagihkan sama rata pada paksi utama, dengan celah pada permulaan dan akhir.

Contoh kod:

.container {
  display: flex;
  justify-content: flex-start; /* 子元素在主轴起点对齐 */
}

.container-end {
  display: flex;
  justify-content: flex-end; /* 子元素在主轴终点对齐 */
}

.container-center {
  display: flex;
  justify-content: center; /* 子元素在主轴中心对齐 */
}

.container-between {
  display: flex;
  justify-content: space-between; /* 子元素在主轴上均匀分布，首尾没有间隔 */
}

.container-around {
  display: flex;
  justify-content: space-around; /* 子元素在主轴上均匀分布，首尾有间隔 */
}

3. Atribut align-item

Atribut align-item digunakan untuk menetapkan penjajaran elemen anak dalam bekas elastik pada paksi silang. Paksi silang ialah paksi yang berserenjang dengan paksi utama. Atribut align-item mempunyai lima nilai pilihan: flex-start, flex-end, center, baseline dan stretch.

1. flex-start: Elemen kanak-kanak dijajarkan pada titik permulaan paksi silang.
2. flex-end: elemen kanak-kanak dijajarkan pada hujung paksi silang.
3. pusat: Elemen kanak-kanak dijajarkan di tengah paksi silang.
4. garis dasar: Elemen kanak-kanak diselaraskan dengan garis dasar.
5. regangan: Elemen kanak-kanak meregang untuk mengisi keseluruhan paksi silang.

Contoh kod:

.container {
  display: flex;
  align-items: flex-start; /* 子元素在交叉轴起点对齐 */
}

.container-end {
  display: flex;
  align-items: flex-end; /* 子元素在交叉轴终点对齐 */
}

.container-center {
  display: flex;
  align-items: center; /* 子元素在交叉轴中心对齐 */
}

.container-baseline {
  display: flex;
  align-items: baseline; /* 子元素以基线对齐 */
}

.container-stretch {
  display: flex;
  align-items: stretch; /* 子元素拉伸填满整个交叉轴 */
}

4. Atribut flex-grow

Atribut flex-grow digunakan untuk menetapkan cara elemen anak dalam bekas fleksibel memperuntukkan ruang yang tinggal. Ia menentukan nisbah pembesaran unsur kanak-kanak, yang lalai kepada 0.

Contoh kod:

.item {
  flex-grow: 1; /* 子元素1放大比例为1 */
}

.item2 {
  flex-grow: 2; /* 子元素2放大比例为2 */
}

sifat flex-shrink

Sifat flex-shrink digunakan untuk menetapkan cara elemen kanak-kanak dalam bekas flex mengecut apabila ruang tidak mencukupi. Ia menentukan nisbah pengecutan unsur kanak-kanak, yang lalai kepada 1.

Sampel kod:

.item {
  flex-shrink: 1; /* 子元素1收缩比例为1 */
}

.item2 {
  flex-shrink: 2; /* 子元素2收缩比例为2 */
}

Ringkasan:

Artikel ini menerangkan secara terperinci penggunaan dan kesan setiap atribut dalam susun atur elastik CSS Flex, termasuk arah flex, justify-content, align-item, flex-grow dan flex-shrink , dll harta. Menguasai penggunaan atribut ini, kami boleh susun atur sub-elemen secara fleksibel dalam bekas fleksibel untuk mencapai kesan reka letak halaman yang pelbagai. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Penjelasan terperinci tentang penggunaan dan kesan setiap atribut dalam susun atur elastik CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!