Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex

Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex

王林asal: 2023-09-27 14:05:012077semak imbas

. Pada masa ini, anda boleh menggunakan susun atur elastik CSS Flex untuk mencapai kesan tatal mendatar. Kita boleh mencapai kesan ini dengan mudah dengan melaraskan sifat bekas dengan kod CSS mudah. Dalam artikel ini, saya akan memperkenalkan cara menggunakan CSS Flex untuk mencapai kesan tatal mendatar dan memberikan contoh kod khusus.

如何通过Css Flex 弹性布局实现横向滚动效果 Layout Fleksibel CSS Fleksibel Pengenalan:

CSS Flex ialah kaedah susun atur yang dibangunkan oleh W3C, iaitu model susun atur yang digunakan untuk menyusun dan mengedarkan item dalam bekas. Dengan menggunakan CSS Flex, kami boleh mencapai susunan item mendatar atau menegak dengan mudah, serta kawalan fleksibel ke atas peruntukan ruang antara item.

Langkah 1: Buat Struktur HTML

Pertama, kita perlu mencipta struktur HTML yang mengandungi div bekas dan item dalam bekas. Kod HTML adalah seperti berikut:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 在这里添加更多的项目 -->
</div>

Langkah 2: Tetapkan sifat CSS Flex

Seterusnya, kita perlu menetapkan sifat CSS Flex bagi div bekas untuk mencapai kesan tatal mendatar. Kod CSS khusus adalah seperti berikut:

.container {
  display: flex;
  overflow-x: scroll;
  /* 横向滚动 */
  white-space: nowrap;
  /* 防止项目换行显示 */
}

.item {
  flex: 0 0 auto;
  /* 设置项目为固定宽度 */
  width: 200px;
  /* 设置项目的宽度 */
  margin-right: 10px;
  /* 设置项目之间的间距 */
}

Penjelasan kod CSS:

paparan: flex;

overflow-x: tatal; Tetapkan bar skrol untuk muncul secara melintang dalam bekas.

ruang putih: nowrap; menghalang item daripada membalut dalam baris lain.

lebar: 200px;
margin-kanan: 10px;
Langkah 3: Jalankan kesannya
Contoh kod lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
    }

    .item {
      flex: 0 0 auto;
      width: 200px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <!-- 添加更多项目 -->
  </div>
</body>
</html>

Dengan menggunakan susun atur elastik CSS Flex, kita boleh mencapai kesan tatal mendatar dengan mudah. Dengan menetapkan sifat CSS Flex bekas, kami boleh mengawal susunan dan jarak item, dan sama ada bar skrol muncul. Di atas adalah contoh mudah yang boleh anda sesuaikan dan lanjutkan mengikut keperluan anda. Saya harap artikel ini akan membantu anda mencapai kesan tatal mendatar dalam pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html auto display overflow margin flex

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang kedudukan mutlak dan kesan melata dalam susun atur fleksibel CSS FlexArtikel seterusnya：Penjelasan terperinci tentang kedudukan mutlak dan kesan melata dalam susun atur fleksibel CSS Flex

Artikel berkaitan

Lihat lagi