如何使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