CSS Flex đáp ứng
Flexbox đáp ứng
Bạn đã học được từ chương CSS Media Queries rằng bạn có thể sử dụng truy vấn phương tiện để tạo các bố cục khác nhau cho các kích thước màn hình và thiết bị khác nhau.
Máy tính xách tay và máy tính để bàn:
di động và máy tính bảng:
Ví dụ: nếu bạn muốn tạo bố cục hai cột cho hầu hết các kích thước màn hình và bố cục một cột cho kích thước màn hình nhỏ (chẳng hạn như điện thoại và máy tính bảng), bạn có thể thay đổi flex-direction
từ row
sang column
tại một vị trí cụ thể. điểm dừng (800px trong ví dụ bên dưới):
Ví dụ
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Một cách khác là thay đổi tỷ lệ phần trăm thuộc tính flex
của các mục flex để tạo các bố cục khác nhau cho các kích thước màn hình khác nhau. Lưu ý rằng chúng ta cũng phải bao gồm flex-wrap: wrap;
trên vùng chứa linh hoạt để ví dụ này hoạt động:
Ví dụ
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Thư viện hình ảnh đáp ứng bằng Flexbox
Sử dụng flexbox để tạo thư viện hình ảnh đáp ứng thay đổi giữa bốn, hai hoặc hình ảnh có chiều rộng đầy đủ, tùy thuộc vào kích thước màn hình:
Hãy tự mình thử »Trang web đáp ứng sử dụng Flexbox
Sử dụng flexbox để tạo một trang web đáp ứng, chứa thanh điều hướng linh hoạt và nội dung linh hoạt:
Hãy tự mình thử »