Ví dụ: đây là bố cục phổ biến cho các trang web tiếp thị, có thể có một hàng gồm 3 mục, thường là hình ảnh, tiêu đề, sau đó là một số văn bản mô tả một số tính năng của sản phẩm. Trên màn hình nhỏ hơn, bạn sẽ muốn các thành phần đó xếp chồng lên nhau một cách gọn gàng và mở rộng khi bạn tăng kích thước màn hình.
Bằng cách sử dụng flexbox cho hiệu ứng này, bạn sẽ không cần truy vấn nội dung đa phương tiện để điều chỉnh vị trí của các phần tử này khi màn hình đổi kích thước.
Từ viết tắt flex có nghĩa là: flex: <flex-grow> <flex-shrink> <flex-basis>
.
flex-grow
Giãn cơ
Nếu bạn muốn các hộp kéo giãn và lấp đầy không gian khi chuyển sang dòng tiếp theo, hãy đặt giá trị của <flex-grow>
thành 1, ví dụ:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Giờ đây, khi bạn tăng hoặc giảm kích thước màn hình, các mục flex này sẽ thu nhỏ và tăng lên.
Không kéo giãn
Nếu bạn muốn các hộp của mình lấp đầy kích thước <flex-basis>
, thu nhỏ ở kích thước nhỏ hơn nhưng không kéo giãn để lấp đầy bất kỳ không gian nào khác, hãy viết: flex: 0 1 <flex-basis>
. Trong trường hợp này, <flex-basis>
của bạn là 150px:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
HTML
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
CSS
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}