CSS Flex Responsive
Flexbox đáp ứng
Bạn đã học được từ chương Truy vấn phương tiện CSS 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 và thiết bị màn hình khác nhau.
Máy tính xách tay và Máy tính để bàn:
Điệ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 các 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
thành column
tại một điểm ngắt cụ thể (800px trong ví dụ bên dưới):
Thí 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 flex
tính của các mục linh hoạt để 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 đưa flex-wrap: wrap;
vào vùng chứa linh hoạt để ví dụ này hoạt động:
Thí 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 toàn chiều rộng, tùy thuộc vào kích thước màn hình:
Trang web đáp ứng sử dụng Flexbox
Sử dụng flexbox để tạo trang web đáp ứng, chứa thanh điều hướng linh hoạt và nội dung linh hoạt: