Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi dan sama lebar boleh skala

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi dan sama lebar boleh skala

Pengenalan: Flexbox ialah mod susun atur berkuasa yang boleh merealisasikan pelbagai keperluan susun atur kompleks dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Flexbox untuk melaksanakan susun atur ketinggian sama dan lebar yang boleh skala dan memberikan contoh kod khusus.

1. Apakah itu Flexbox?

Flexbox ialah mod susun atur berdasarkan model kotak fleksibel, yang mencapai pelbagai kesan susun atur fleksibel dengan memperuntukkan ruang sub-elemen dalam bekas secara automatik. Ia mempunyai ciri-ciri berikut:

1. membolehkan elemen kanak-kanak berkembang secara automatik dan mengecut mengikut keperluan.
2. Anda boleh mengawal susunan elemen kanak-kanak dalam arah paksi utama.
3. Boleh mengendalikan penjajaran elemen kanak-kanak dalam bekas.
4. Anda boleh menukar susunan elemen kanak-kanak.

2. Persediaan

Sebelum anda mula menggunakan Flexbox, sila pastikan anda memahami asas HTML dan CSS dan memperkenalkan sifat reka letak Flexbox ke dalam kod.

/ Perkenalkan atribut susun atur Flexbox dalam CSS /
.container {
paparan: flex;
}

3 Laksanakan susun atur ketinggian sama berskala

Pertama, mari kita laksanakan susun atur yang sama tinggi. Dalam reka letak ini, ketinggian bekas akan melaraskan secara automatik mengikut jumlah kandungan, dan elemen kanak-kanak akan membahagikan ketinggian bekas secara sama rata.

Kod HTML adalah seperti berikut:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Kod CSS adalah seperti berikut:

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Analisis:

1. Tetapkan atribut paparan bekas kepada fleksibel supaya ia menggunakan mod susun atur Flexbox.
2. Atribut flex elemen kanak-kanak ditetapkan kepada 1, yang bermaksud bahawa ia akan membahagikan ruang bekas yang sama.
3. Dengan menetapkan gaya sempadan, kita dapat melihat ketinggian elemen kanak-kanak dengan lebih jelas.

4. Laksanakan susun atur lebar sama berskala

Seterusnya, kami akan melaksanakan susun atur lebar sama berskala. Dalam reka letak ini, lebar elemen kanak-kanak secara automatik melaraskan kepada lebar bekas, dan lebarnya juga dibahagikan sama rata.

Kod HTML adalah seperti berikut:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Kod CSS adalah seperti berikut:

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Penghuraian:

1. Begitu juga, kita perlu menetapkan atribut paparan bekas untuk melentur.
2. Sifat flex bagi elemen kanak-kanak ditetapkan kepada 1, yang bermaksud bahawa ia akan membahagikan lebar bekas yang sama.
3. Dengan menetapkan gaya sempadan, kita dapat melihat kelebaran elemen kanak-kanak dengan lebih jelas.

5. Laksanakan susun atur berskala serentak dengan ketinggian yang sama dan lebar yang sama

Akhir sekali, kami akan menggabungkan ciri-ciri dua reka letak sebelumnya untuk melaksanakan susun atur berskala yang sama tinggi dan lebar yang sama.

Kod HTML adalah seperti berikut:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Kod CSS adalah seperti berikut:

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Penghuraian:

1. Begitu juga, kita perlu menetapkan atribut paparan bekas untuk melentur.
2. Sifat lentur bagi elemen kanak-kanak ditetapkan kepada 1, yang bermaksud bahawa ia akan membahagikan lebar bekas yang sama.
3. Dengan menetapkan gaya sempadan, kita dapat melihat kelebaran elemen kanak-kanak dengan lebih jelas.

Kesimpulan:

Dengan Flexbox, kita boleh merealisasikan pelbagai keperluan susun atur dengan mudah, termasuk susun atur yang boleh skala sama tinggi dan sama lebar. Saya harap contoh kod yang disediakan dalam artikel ini dapat membantu anda menguasai reka letak Flexbox dengan lebih baik. Jika anda mempunyai lebih banyak soalan tentang Flexbox, anda boleh terus mempelajari lebih banyak maklumat dan amalan.

Bahan rujukan:

1. Panduan CSS Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. Flexbox pertempuran sebenar: https://zhuanlan.zhihu.com/ p /25303493

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi dan sama lebar boleh skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!