Card Layout với Flexbox
Lập trìnhTạo layout thẻ sản phẩm sử dụng Flexbox
Hướng dẫn
Lời giải
Tạo layout cho danh sách sản phẩm: - Sử dụng Flexbox để sắp xếp các thẻ - Mỗi thẻ có ảnh, tiêu đề, mô tả và giá - Layout responsive: trên mobile hiển thị 1 cột, tablet 2 cột, desktop 3 cột
Code mẫu
<!DOCTYPE html>
<html>
<head>
<style>
.products-container {
/* Viết CSS của bạn ở đây */
}
.product-card {
/* Viết CSS của bạn ở đây */
}
</style>
</head>
<body>
<div class="products-container">
<div class="product-card">
<img src="https://via.placeholder.com/300x200" alt="Product 1">
<h3>Sản phẩm 1</h3>
<p>Mô tả sản phẩm 1</p>
<span class="price">100.000đ</span>
</div>
<!-- Thêm nhiều product-card khác -->
</div>
</body>
</html>