Làm thế nào để làm cho một mặt hàng flex không điền vào chiều cao của container flex?

Question

Như bạn có thể thấy trong mã bên dưới, div bên trái bên trong thùng chứa flex trải dài để đáp ứng chiều cao của div bên phải. Có một thuộc tính tôi có thể thiết lập để làm cho chiều cao của nó tối thiểu cần thiết để giữ nội dung của nó (như bình thường height: auto divs bên ngoài container flex)?

#a { 
 
    display: flex; 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
</div>

Answer 1

Các align-items, hoặc tương ứng align-content thuộc tính điều khiển hành vi này.

align-items xác định các mục vị trí vuông góc với flex-direction, mặc định là flex-directionrow, therfore vị trí thẳng đứng có thể được kiểm soát với align-items. Ngoài ra còn có thuộc tính align-self để kiểm soát căn chỉnh theo từng mặt hàng.

#a { 
 
    display:flex; 
 

 
    align-items:flex-start; 
 
    align-content:flex-start; 
 
    } 
 

 
#a > div { 
 
    
 
    background-color:red; 
 
    padding:5px; 
 
    margin:2px; 
 
    } 
 
#a > #c { 
 
    align-self:stretch; 
 
}

<div id="a"> 
 
    
 
    <div id="b">left</div> 
 
    <div id="c">middle</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
    
 
</div>

css-trick có một thiết bị article về chủ đề này. Tôi khuyên bạn nên đọc nó một vài lần.

Answer 2

Khi bạn tạo một thùng chứa flex, các quy tắc flex mặc định khác nhau sẽ được phát.

Hai trong số các quy tắc mặc định này là flex-direction: row và align-items: stretch. Điều này có nghĩa là các mặt hàng flex sẽ tự động căn chỉnh trong một hàng duy nhất và mỗi mục sẽ lấp đầy chiều cao của vùng chứa.

Nếu bạn không muốn mục flex căng – tức là, như bạn đã viết:

làm cho chiều cao của nó yêu cầu tối thiểu để giữ nội dung của nó

... sau đó chỉ cần ghi đè mặc định bằng align-items: flex-start.

#a { 
 
    display: flex; 
 
    align-items: flex-start; /* NEW */ 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div> 
 
    right<br>right<br>right<br>right<br>right<br> 
 
    </div> 
 
</div>

Dưới đây là một minh hoạ từ flexbox spec làm nổi bật năm giá trị cho align-items và làm thế nào họ đặt mục flex trong container. Như đã đề cập trước đó, stretch là giá trị mặc định.

^{Nguồn: W3C}