Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi, lebar sama, dan jarak yang sama skala

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama, lebar sama, jarak sama boleh skala

Dalam pembangunan web, reka letak adalah bahagian yang sangat penting. Kaedah reka letak tradisional boleh menyebabkan banyak masalah, seperti susunan elemen yang tidak konsisten pada saiz skrin yang berbeza, kesukaran untuk melaraskan elemen kepada ketinggian dan lebar yang sama, dan kesukaran dalam mengawal jarak reka letak. Walau bagaimanapun, Flexbox (susun atur kotak fleksibel) ialah modul CSS berkuasa yang boleh menyelesaikan masalah ini dan menjadikan reka letak lebih fleksibel dan boleh dikawal.

Inti susun atur Flexbox ialah bekas flex dan item flex. Bekas fleksibel merujuk kepada elemen induk yang mana reka letak Flexbox digunakan, manakala item flex ialah elemen anak unsur induk. Apabila menggunakan susun atur Flexbox, kami boleh mengawal susunan dan penjajaran elemen anak dalam bekas dengan menetapkan sifat elemen induk.

Sekarang, mari belajar cara menggunakan Flexbox untuk susun atur sama tinggi, lebar sama, dan jarak yang sama. Kami akan menunjukkan ini dengan contoh kod konkrit.

Pertama, kita perlu memperkenalkan gaya CSS di kepala dokumen HTML untuk menggunakan reka letak Flexbox. Tambahkan kod berikut dalam teg : 标签中添加以下代码：

<style>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .flex-item {
        flex-basis: 30%; /* 三个子元素占据容器的30%，总共占据90% */
        height: 200px; /* 所有子元素的高度均为200像素 */
        background-color: #f0f0f0;
        margin-bottom: 20px; /* 子元素之间的间距为20像素 */
    }
</style>

在标签中，我们可以使用下面的代码来创建一个包含三个子元素的弹性容器：

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

上述代码创建了一个弹性容器，并将三个子元素添加到容器中。每个子元素都具有.flex-item类名，这样我们可以为它们设置相同的样式。

在上述代码中，我们设置了以下几个属性：

• display: flex;：表示元素是一个弹性容器。
• flex-wrap: wrap;：表示当子元素超出容器宽度时，将其放入下一行。
• justify-content: space-between;rrreee
Dalam teg , kita boleh menggunakan kod berikut untuk mencipta elemen tiga anak Bekas Flex:

rrreee

Kod di atas mencipta bekas fleksibel dan menambah tiga elemen anak pada bekas. Setiap elemen kanak-kanak mempunyai nama kelas .flex-item supaya kami boleh menggayakan semuanya sama.

Dalam kod di atas, kami menetapkan atribut berikut:

• paparan: flex;: Menunjukkan bahawa elemen ialah bekas yang fleksibel.
• flex-wrap: wrap;: Menunjukkan bahawa apabila elemen anak melebihi lebar bekas, masukkannya ke baris seterusnya.
• justify-content: space-between;: Menunjukkan bahawa elemen anak diagihkan sama rata dalam ruang mendatar bekas.

Selain itu, kami juga menetapkan gaya item yang fleksibel, termasuk lebar, ketinggian, warna latar belakang, jarak, dll.

Melalui kod di atas, kita boleh mencapai kesan berikut:

🎜Tiga sub-elemen menduduki 30% daripada bekas, menduduki 90% secara keseluruhan. 🎜🎜Semua elemen kanak-kanak mempunyai ketinggian 200 piksel. 🎜🎜Jarak antara elemen kanak-kanak ialah 20 piksel. 🎜🎜🎜Apabila saiz tetingkap penyemak imbas berubah, reka letak Flexbox secara automatik melaraskan susunan dan lebar elemen kanak-kanak untuk menyesuaikan diri dengan saiz skrin baharu. 🎜🎜Ringkasan: 🎜Susun atur Flexbox ialah kaedah reka letak yang sangat berkuasa dan fleksibel yang cemerlang dalam menyelesaikan masalah reka letak dalam pembangunan web. Dalam artikel ini, kami mempelajari cara menggunakan Flexbox untuk mencipta reka letak berskala, sama tinggi, sama lebar, sama jaraknya. Dengan menetapkan sifat unsur ibu bapa dan anak dengan betul, kami boleh membuat reka letak halaman web yang cantik dengan mudah tanpa terlalu bergantung pada kaedah reka letak tradisional. Saya harap tutorial ini membantu anda, dan anda dialu-alukan untuk mempelajari dan meneroka lebih banyak ciri dan penggunaan reka letak Flexbox. 🎜

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