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: -webkit-flex; hiển thị: linh hoạt; -webkit-flex-flow: bọc hàng; flex-flow: bọc hàng; độ dày phông chữ: đậm; căn chỉnh văn bản: giữa; } .flex-container > * { đệm: 10px; linh hoạt: 1 100%; } .main { text-align: left; nền: hoa ngô xanh; } .header {background: Coral;} .footer {background: lightgreen;} .aside {background: moccasin;} @media all và (min-width: 768px) { .aside { flex: 1 auto; } .main { flex: 3 0px; } .aside { thứ tự: 1; } .main { thứ tự: 2; } .footer { thứ tự: 4; } } </style> </head> <body> <div class="flex-container"> <header class="header">Tiêu đề</header> <aside class="aside">Bên cạnh</aside> < bài viết class="main"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tạm thời. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo Nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.</p> </article> <footer class="footer">Footer</footer> </div> </body> </html>