Bánh kếp bị lệch

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 ba mục, thường kèm theo hình ảnh, tiêu đề, sau đó là một số văn bản, mô tả một số đặc điểm của sản phẩm. Trên màn hình nhỏ hơn, bạn sẽ muốn các quảng cáo được sắp xếp gọn gàng và mở rộng khi tăng kích thước màn hình.

Khi sử dụng hộp linh hoạt 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.

Viết tắt flex là viết tắt của: flex: <flex-grow> <flex-shrink> <flex-basis>.

flex-grow Căng cơ

Nếu bạn muốn các hộp kéo giãn và lấp đầy không gian khi chúng gói thành 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 linh hoạt này sẽ thu nhỏ và tăng lên.

Không giãn cơ

Nếu bạn muốn lấp đầy hộp bằng kích thước <flex-basis>, hãy thu nhỏ trên kích thước nhỏ hơn, nhưng không kéo giãn để lấp đầy khoảng trống, 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;
}

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}