Cara menggunakan susun atur CSS Flex untuk mencapai susun atur lajur ketinggian yang sama

Cara menggunakan Reka Letak Fleksibel CSS untuk mencapai susun atur lajur yang sama tinggi

Layout Kotak Fleksibel CSS (Layout Kotak Fleksibel CSS), dirujuk sebagai reka letak Flex, ialah modul yang digunakan untuk reka letak halaman. Reka letak fleksibel memudahkan kami melaksanakan reka letak lajur sama ketinggian, supaya ia boleh dipaparkan pada ketinggian yang sama tanpa mengira ketinggian kandungan.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan susun atur CSS Flex untuk mencapai susun atur lajur ketinggian yang sama. Di bawah ialah contoh kod khusus.

Struktur HTML:

<div class="container">
  <div class="column">
    <h3>Title 1</h3>
    <p>Content 1</p>
  </div>
  <div class="column">
    <h3>Title 2</h3>
    <p>Content 2</p>
  </div>
  <div class="column">
    <h3>Title 3</h3>
    <p>Content 3</p>
  </div>
</div>

Gaya CSS:

.container {
  display: flex;
}

.column {
  flex: 1;
  border: 1px solid #000;
  padding: 10px;
}

Dalam contoh kod di atas, kami telah mencipta bekas dengan tiga lajur. Setiap lajur ditetapkan kepada flex: 1, yang bermaksud setiap lajur akan diagihkan sama rata di antara ruang bekas yang tersedia. flex: 1，这意味着每个列都会平均分配容器的可用空间。

通过设置flex: 1，每个列都会自动撑开，使得它们的高度相等。

我们还给列添加了一些样式，如边框和内边距，以使其更具可读性。

在实际使用中，您可以根据需要对容器和列进行进一步的样式调整。

这是一个简单的示例，您可以根据实际需求进行更复杂的布局。这种等高的列布局在许多场景下非常有用，比如产品列表、图片展示等。

总结：

通过使用CSS Flex布局，我们可以轻松实现等高的列布局。使用flex: 1

Dengan menetapkan flex: 1, setiap lajur akan diregangkan secara automatik supaya ketinggiannya sama.

Kami juga menambahkan beberapa gaya pada lajur seperti jidar dan pelapik untuk menjadikannya lebih mudah dibaca. 🎜🎜Dalam penggunaan sebenar, anda boleh menggayakan lagi bekas dan lajur mengikut keperluan. 🎜🎜Ini adalah contoh mudah, anda boleh membuat susun atur yang lebih kompleks mengikut keperluan sebenar anda. Reka letak lajur sama ketinggian ini sangat berguna dalam banyak senario, seperti senarai produk, paparan imej, dsb. 🎜🎜Ringkasan: 🎜🎜Dengan menggunakan reka letak CSS Flex, kami boleh mencapai reka letak lajur ketinggian yang sama dengan mudah. Gunakan flex: 1 untuk meregangkan setiap lajur secara automatik supaya ketinggiannya sama. Kaedah ini bukan sahaja mudah, tetapi juga sangat fleksibel dan sesuai untuk pelbagai susun atur halaman. 🎜🎜Semoga artikel ini membantu anda, jika anda mempunyai sebarang pertanyaan atau cadangan, sila hubungi kami. 🎜

Atas ialah kandungan terperinci Cara menggunakan susun atur CSS Flex untuk mencapai susun atur lajur ketinggian yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!