Trang chủ
CSS
CSS nổi
Ví dụ
Tryit: Sử dụng Flexbox để tạo hộp linh hoạt
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> <style> .flex-container { display: flex; flex-wrap: nowrap; màu nền: DodgerBlue; } .flex-container .box { màu nền: #f1f1f1; chiều rộng: 50%; lề: 10px; căn chỉnh văn bản: giữa; chiều cao dòng: 75px; cỡ chữ: 30px; } </style> </head> <body> <h1>Hộp linh hoạt</h1> <div class="flex-container"> <div class="box">Hộp 1 - Đây là một số văn bản để đảm bảo rằng nội dung trở nên thực sự cao. Đây là một số văn bản để đảm bảo rằng nội dung sẽ thực sự cao.</div> <div class="box">Hộp 2 - Chiều cao của tôi sẽ theo Hộp 1.</div> </div> <p>Cố gắng thay đổi kích thước cửa sổ trình duyệt để xem bố cục linh hoạt.</p> <p><strong>Lưu ý:</strong> Flexbox không được hỗ trợ trong Internet Explorer 10 hoặc các phiên bản cũ hơn.</p> </body> </html>