Penjelasan terperinci tentang sifat susun atur fleksibel CSS: flex dan justify-content

Penjelasan terperinci tentang sifat susun atur fleksibel CSS: flex dan justify-content

Dalam reka bentuk web moden, reka letak fleksibel (flexbox) telah menjadi kaedah reka letak yang sangat berguna. Reka letak fleksibel membolehkan kami membuat reka letak mudah suai dan fleksibel yang sesuai dengan pelbagai saiz skrin dan jenis peranti. Dua sifat teras, flex dan justify-content, memainkan peranan penting dalam reka letak yang fleksibel.

1. Atribut Flex

Atribut flex ialah atribut yang mentakrifkan bekas susun atur fleksibel dan digunakan untuk mengawal kebolehskalaan setiap sub-item dalam bekas fleksibel. Dengan menetapkan nilai flex yang berbeza, kami boleh melaksanakan pelbagai susun atur penyesuaian. Sifat

flex mempunyai tiga nilai:

1. flex-grow: Tetapkan nisbah pengembangan sub-item, lalai ialah 0. Apabila ditetapkan kepada 0, ini bermakna tiada penskalaan; apabila ditetapkan kepada nilai yang lebih besar daripada 0, ini bermakna penskalaan secara berkadar.
2. flex-shrink: Tetapkan nisbah pengecutan sub-item, lalai ialah 1. Apabila ditetapkan kepada 0, ini bermakna tiada pengecutan; apabila ditetapkan kepada nilai yang lebih besar daripada 0, ini bermakna pengecutan dalam perkadaran.
3. flex-basis: Tetapkan saiz asas sub-item, lalainya ialah auto. Ia boleh ditetapkan kepada nilai panjang tertentu, atau ia boleh ditetapkan kepada auto, yang bermaksud saiz ditentukan oleh sub-item itu sendiri.

Kod sampel adalah seperti berikut:

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

.item {
  flex: 1;
}

Dalam contoh ini, kami menyediakan bekas dan menetapkan bekas sebagai bekas susun atur fleksibel dengan menetapkan paparan: flex. Kemudian selaraskan sub-item secara mendatar dan sejajar tengah dengan menetapkan justify-content: center. Nilai flex item kanak-kanak ialah 1, yang bermaksud bahawa semua item kanak-kanak mengembang dan mengecut dalam perkadaran yang sama.

2. Atribut justify-content

Atribut justify-content digunakan untuk melaraskan penjajaran sub-item dalam bekas fleksibel. Ia mengawal penjajaran subitem pada paksi utama (arah mendatar). Sifat

justify-content mempunyai nilai berikut:

1. flex-start: Item anak dijajarkan pada kedudukan permulaan bekas flex.
2. flex-end: Subitem dijajarkan di hujung bekas fleksibel.
3. pusat: Sub-item berpusat di dalam bekas fleksibel.
4. ruang-antara: Sub-item diagihkan sama rata dalam bekas flex dan ruang antara item dikekalkan.
5. ruang sekeliling: sub-item diagihkan sama rata dalam bekas flex, mengekalkan jarak yang sama sebelum dan selepas item.

Kod sampel adalah seperti berikut:

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

.item {
  flex: 1;
}

Dalam contoh ini, kami menyediakan bekas dan menetapkan bekas kepada bekas susun atur fleksibel dengan menetapkan paparan: flex. Kemudian tetapkan justify-content: space-between untuk mengagihkan item kanak-kanak dalam bekas secara sama rata dan mengekalkan ruang antara item.

Sifat susun atur fleksibel CSS fleksibel dan kandungan justify menyediakan cara yang sangat mudah untuk melaksanakan reka letak adaptif dan fleksibel. Dengan memanfaatkan kedua-dua sifat ini, kami boleh membuat reka letak dengan mudah yang menyesuaikan diri dengan peranti dan saiz skrin yang berbeza. Dalam projek sebenar, kita boleh menggunakan kedua-dua atribut ini mengikut keperluan dan keperluan reka bentuk secara munasabah untuk mencapai kesan susun atur yang terbaik.

Untuk meringkaskan, sifat flex digunakan untuk mengawal kebolehskalaan sub-item, manakala sifat justify-content digunakan untuk melaraskan penjajaran sub-item pada paksi utama. Kedua-dua atribut ini adalah atribut yang sangat penting dan biasa digunakan dalam susun atur fleksibel Dengan menggunakannya dengan betul, kita boleh mencapai pelbagai kesan susun atur penyesuaian dengan mudah.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat susun atur fleksibel CSS: flex dan justify-content. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!