Trang chủ
CSS
Ví dụ CSS MQ
Dùng thử: Ví dụ về sử dụng truy vấn phương tiện
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> * { box-sizing: border-box; } /* Vùng chứa cho flexbox */ .row { display: flex; flex-wrap: bọc; } /* Tạo bốn cột bằng nhau */ .column { flex: 25%; phần đệm: 20px; } /* Trên màn hình rộng 992px trở xuống, chuyển từ bốn cột thành hai cột */ @media screen và (max-width: 992px) { .column { flex: 50%; } } /* Trên màn hình rộng 600px trở xuống, đặt các cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen and (max-width: 600px) { .row { flex-direction: columns ; } } </style> </head> <body> <h2>Bố cục bốn cột đáp ứng với Flex</h2> <p><strong>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi.</strong> Trên các màn hình Chiều rộng 992px trở xuống, các cột sẽ thay đổi kích thước từ bốn cột thành hai cột. Trên màn hình có chiều rộng từ 600px trở xuống, các cột sẽ xếp chồng lên nhau thay vì cạnh nhau.</p> <div class="row"> <div class="column" style="background-color: #aaa;"> <h2>Cột 1</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#bbb;"> <h2 >Cột 2</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Cột 3</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Cột 4</h2> <p>Một số văn bản.. </p> </div> </div> </body> </html>