Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran mendatar-html tutorial-php.cn

Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran mendatar

PHPz

Lepaskan： 2023-10-16 09:39:23

asal

1035 orang telah melayarinya

Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran mendatar

Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran mendatar dan sama

Dalam pembangunan web moden, reka letak yang fleksibel dan adaptif adalah bahagian penting. Flexbox (susun atur fleksibel) ialah model susun atur yang diperkenalkan dalam CSS3 yang menyediakan cara mudah dan berkuasa untuk mencipta susun atur bekas dan sub-item yang fleksibel. Dalam tutorial ini, kita akan belajar cara menggunakan Flexbox untuk mencapai pengedaran sama mendatar.

1 Buat struktur HTML asas

Pertama, kita perlu mencipta struktur HTML asas. Dalam teg badan, kami mencipta bekas dengan beberapa sub-item. Setiap item kanak-kanak secara kolektif akan menduduki lebar bekas dan akan diedarkan secara mendatar.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Flexbox水平等分布局</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">子项目 1</div>
    <div class="item">子项目 2</div>
    <div class="item">子项目 3</div>
    <div class="item">子项目 4</div>
  </div>
</body>
</html>

Salin selepas log masuk

2. Tambah gaya

Seterusnya, kita perlu menambah helaian gaya (styles.css) pada fail HTML dan tetapkan reka letak Flexbox di dalamnya.

.container {
  display: flex; /* 将容器设置为Flex布局 */
  justify-content: space-between; /* 控制子项目的水平分布方式 */
  width: 100%; /* 设置容器宽度为100% */
}

.item {
  width: 25%; /* 将每个子项目的宽度设置为25% */
  background-color: #ccc;
  padding: 20px;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan bekas kepada reka letak Flex melalui paparan: flex. Kemudian, gunakan justify-content: space-between untuk menentukan cara subitem harus diedarkan secara mendatar, yang akan mengekalkan jarak yang sama antara setiap subitem. Akhir sekali, kami menetapkan lebar setiap sub-item kepada 25% untuk mencapai pengedaran yang sama secara mendatar. display: flex将容器设置为Flex布局。然后，使用justify-content: space-between指定子项目的水平分布方式，这将使每个子项目之间保留相等的间距。最后，我们将每个子项目的宽度设置为25%，以实现水平等分布。

3. 运行代码

在浏览器中打开HTML文件，您将看到子项目已经水平等分布在容器中。每个子项目之间都有相等的间距，而且宽度也是相等的。

4. 扩展布局

使用Flexbox，您可以轻松地扩展布局。例如，如果您想要添加更多的子项目，只需简单地在容器中添加更多的<div class="item">...</div>

3. Jalankan kod

Buka fail HTML dalam penyemak imbas, anda akan melihat bahawa sub-projek telah diedarkan secara mendatar dalam bekas. Terdapat jarak yang sama antara setiap sub-item dan lebarnya juga sama.

4. Kembangkan susun atur

Menggunakan Flexbox, anda boleh memanjangkan reka letak anda dengan mudah. Contohnya, jika anda ingin menambah lebih banyak sub-item, cuma tambahkan lebih banyak <div class="item">...</div> dalam bekas. 🎜

<div class="container">
  <div class="item">子项目 1</div>
  <div class="item">子项目 2</div>
  <div class="item">子项目 3</div>
  <div class="item">子项目 4</div>
  <div class="item">子项目 5</div>
  <div class="item">子项目 6</div>
</div>

Salin selepas log masuk

🎜Dengan cara ini, sub-projek baharu secara automatik akan diedarkan secara mendatar dan lain-lain dalam bekas. 🎜🎜Kesimpulan🎜🎜Dengan menggunakan Flexbox, kita boleh mencapai susun atur teragih mendatar dengan mudah. Flexbox ialah kaedah reka letak yang ringkas dan berkuasa yang boleh menyesuaikan diri dengan pelbagai saiz skrin dan jenis peranti, memberikan kami pilihan susun atur yang lebih fleksibel. Saya harap tutorial ini membantu anda, cubalah! 🎜

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!