Rumah >hujung hadapan web >html tutorial >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
, kita boleh menggunakan kod berikut untuk mencipta elemen tiga anak Bekas Flex: 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:
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:
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!