Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex-tutorial css-php.cn

Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex

王林

Lepaskan： 2023-09-27 14:05:01

asal

2163 orang telah melayarinya

. 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>

Salin selepas log masuk

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;
  /* 设置项目之间的间距 */
}

Salin selepas log masuk

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.

Langkah 3: Jalankan kesannya
```
<!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>
```
Salin selepas log masuk
Ringkasan: 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!