Bố cục chia cột có tính responsive sử dụng Flexbox. Dưới đây là một đoạn mã HTML và CSS để tạo một bố cục chia cột sử dụng Flexbox có tính responsive. Mã này cho phép cột co dãn trên màn hình nhỏ, giúp cải thiện trải nghiệm người dùng trên nhiều thiết bị khác nhau.
Thêm CSS này trước thẻ </head>
<style>/*<![CDATA[*/.custom-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px}.column{flex:1;margin:10px;background-color:#f0f0f0;padding:15px;box-sizing:border-box}@media screen and (max-width:767px){.column{flex:100%}}/*]]>*/</style>
Thêm HTML
<section class="custom-container"><div class="column"><h2>Column 1</h2><p>Content for column 1.</p></div><div class="column"><h2>Column 2</h2><p>Content for column 2.</p></div><div class="column"><h2>Column 3</h2><p>Content for column 3.</p></div></section>
Các bạn để ý 3 màu mình tô bên trên, cứ 1 màu là 1 cột, 2 cột thì xóa bớt màu dưới... Tự động nó sẽ tạo 2 cột cho các bạn.
Bài viết: Chia cột đơn giản với CSS Flexbox được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét