Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex
. 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.
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 HTMLPertama, 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:
overflow-x: tatal; Tetapkan bar skrol untuk muncul secara melintang dalam bekas.
ruang putih: nowrap; menghalang item daripada membalut dalam baris lain.
<!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>
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!