如何使Flex項目不填充Flex容器的高度？

Question

正如你在下面的代碼中看到的，flex容器中的左div伸展以滿足右div的高度。是否有一個屬性可以設置爲使其高度達到保持其內容所需的最小值（如通常的height: auto div在柔性容器外面）？

#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

的align-items，或分別align-content屬性控制此行爲。

align-items定義了項垂直定位到flex-direction，默認flex-direction是row，therfore垂直放置可以與align-items進行控制。 還有align-self屬性來控制每個項目的對齊。

#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-技巧對話題的優秀article。我建議閱讀幾次。

Answer 2

當您創建柔性容器時，各種默認柔性規則將發揮作用。

其中兩個默認規則是flex-direction: row和align-items: stretch。這意味着flex項目將自動對齊成一行，每個項目將填充容器的高度。

如果你不想撓項目舒展–即，像你這樣寫道：

使其高度持有其內容

所需的最小...那麼簡單用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>

下面是來自flexbox spec，突出爲align-items，以及它們如何定位在容器內彎曲項五個值的說明。如前所述，stretch是默認值。

^來源：W3C