Một câu hỏi phổ biến mà tôi thấy khi được hỏi là, “Làm cách nào để hiển thị các tiện ích con được đặt trong vùng tiện ích con trong các cột?”
Trong hướng dẫn này, tôi cung cấp mã CSS Flexbox cơ bản để sắp xếp ba phần tử con của một vùng chứa cạnh nhau trong các cột.
Chúng tôi bắt đầu bằng cách khai báo display thuộc tính của container là flex .
.home-bottom {
display: flex;
}
Sau đó, để hiển thị các phần tử con ở xa nhau, tức là bên trái xuất hiện nhiều nhất ở bên trái, bên phải xuất hiện nhiều nhất ở bên phải và chính giữa ở trung tâm, chúng tôi thêm cho phụ huynh / vùng chứa.justify-content: space-between
.home-bottom {
display: flex;
justify-content: space-between;
}
Nếu ba tiện ích con hoặc phần tử con không có chiều rộng bằng nhau, bạn có thể đặt chiều rộng của từng tiện ích con thành 32% (nhỏ hơn 33,333% nếu không chúng sẽ bị dính vào nhau).
Tiếp theo, tại truy vấn phương tiện cho chiều rộng mà dưới đó các phần tử con sẽ xuất hiện xếp chồng lên nhau, chúng tôi đặt cho vùng chứa để trục flex là dọc (mặc định là ngang). Các mục linh hoạt chảy dọc theo trục linh hoạt.flex-direction: column
@media only screen and (max-width: 340px) {
.home-bottom {
flex-direction: column;
}
}
Kết hợp điều này lại với nhau, chúng ta có
.home-bottom {
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 340px) {
.home-bottom {
flex-direction: column;
}
}
Cuối cùng, chúng ta cần thêm tiền tố của nhà cung cấp trình duyệt vào CSS Flexbox. Tôi sử dụng codepen tiện dụng này cho việc đó. Chỉ cần thay thế CSS trong codepen bằng của bạn, nhấp vào mũi tên xuống ở bên phải và nhấp vào “Xem CSS đã biên dịch”.
Trong ví dụ này, đó sẽ là
.home-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 340px) {
.home-bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}