Html 如何使弹性项目不填充弹性容器的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33212892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a flex item not fill the height of the flex container?
提问by user81993
As you can see in the code below, the left div inside the flex container stretches to meet the height of the right div. Is there an attribute I can set to make its height the minimum required for holding its content (like usual height: autodivs outside flex containers)?
正如您在下面的代码中看到的那样，flex 容器内的左侧 div 会拉伸以满足右侧 div 的高度。是否有我可以设置的属性使其高度成为保存其内容所需的最小值（就像height: autoflex 容器外的普通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>回答by Sebastian Wozny
The align-items, or respectively align-contentattribute controls this behaviour.
的align-items，或分别align-content属性控制此行为。
align-itemsdefines the items' positioning perpendicularlyto flex-direction.
align-items定义项目垂直于的位置flex-direction。
The default flex-directionis row, therfore vertical placement can be controlled with align-items.
默认flex-direction为row，因此可以使用 控制垂直放置align-items。
There is also the align-selfattribute to control the alignment on a per item basis.
还有一个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-tricks has an excellent articleon the topic. I recommend reading it a couple of times.
回答by Michael Benjamin
When you create a flex container various default flex rules come into play.
当你创建一个 flex 容器时，各种默认的 flex 规则开始发挥作用。
Two of these default rules are flex-direction: rowand align-items: stretch. This means that flex items will automatically align in a single row, and each item will fill the height of the container.
其中两个默认规则是flex-direction: row和align-items: stretch。这意味着 flex 项目将自动在一行中对齐，并且每个项目将填充容器的高度。
If you don't want flex items to stretch – i.e., like you wrote:
如果你不想让 flex 项目伸展——即，就像你写的那样：
make its height the minimum required for holding its content
使其高度成为保持其内容所需的最小值
... then simply override the default with align-items: flex-start.
...然后简单地用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>Here's an illustration from the flexbox specthat highlights the five values for align-itemsand how they position flex items within the container. As mentioned before, stretchis the default value.
这是flexbox 规范中的一个插图，突出显示了align-itemsflex 项目的五个值以及它们如何在容器中定位 flex 项。如前所述，stretch是默认值。
Source: W3C
资料来源：W3C
