Làm thế nào để kéo dài trẻ em để điền vào trục chéo?

141

Tôi có một flexbox trái-phải:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Mở rộng đoạn trích

Vấn đề là đứa trẻ đúng không cư xử phản ứng nhanh. Để cụ thể, tôi muốn nó lấp đầy chiều cao của trình bao bọc.

Làm thế nào để thực hiện điều này?

css flexbox

— Deborah Cole
nguồn

Nó không lấp đầy chiều cao của bọc! tôi đã thử nghiệm nó trong Chrome và Firefox và không có vấn đề gì. có lẽ bạn đã đơn giản hóa mã của bạn quá nhiều. bạn có thể kiểm tra điều này bằng cách cài đặt background-colorcho trẻ em hoặc cài đặt align-items: centertrong trình bao bọc.

— samad montazeri

vâng, chiều cao của trình bao bọc không được điền vào safari vì một số lý do ... chrome và firefox thực hiện điều này một cách độc đáo bằng cách thiết lập chiều cao: '100%' ở trẻ em

— Pencilcheck

175

Các phần tử con của hộp chứa hàng flexo sẽ tự động lấp đầy không gian dọc của thùng chứa.
Chỉ định flex: 1;cho một đứa trẻ nếu bạn muốn nó lấp đầy không gian ngang còn lại:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Mở rộng đoạn trích

Chỉ định flex: 1;cho cả hai đứa trẻ nếu bạn muốn chúng lấp đầy số lượng bằng nhau của không gian ngang:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Mở rộng đoạn trích

— Alex Shesterov
nguồn

flexlà một tài sản viết tắt cho flex-grow, flex-shrinkvà flex-basis. flex: 1;tương đương với flex-grow: 1;.

— Rory O'Kane

Có vẻ như align-items: stretch;không cần thiết

— Matt