问题描述
我有一个带有两个flex项目的flex布局，显示为行(flex-direction: column).物品应具有最小高度，但应保持与其中一个物品需要增长的高度相同.请参见此JSFiddle 并减小结果窗格的宽度；这会强制第二个.component元素增加其高度，但是第一个.component元素的高度保持不变.
I have a flex layout with two flex items, displayed as rows (flex-direction: column). The items should have a minimum height but they should maintain the same height it one of them needs to grow. See this JSFiddle and decrease the width of the result pane; this forces the second .component element to increase its height, but the height of the first .component element remains the same.
是否可以迫使弹性物品保持相同的高度?请注意，其中的主要内容是两个.component元素的堆叠，没有flex-direction: column我无法实现； flex-direction: row本来可以使高度相同，但不能堆叠.
Is it possible to force the flex items to maintain the same height? Please note that the main thing in this is the stacking of the two .component elements, which I couldn't achieve without flex-direction: column; flex-direction: row would have made the same height possible but the stacking does not work.
这是我到目前为止的结果:
Here is the result of what I have so far:
div {
border: 1px solid black;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-content: stretch;
}
.component {
min-height: 300px;
}
.left {
margin-left: 50px;
margin-top: 50px;
margin-right: 100px;
background-color: lightyellow;
}
.right {
margin-left: 100px;
margin-top: -250px;
margin-right: 50px;
background-color: lightgreen;
}<div class="container">
<div class="component left">
</div>
<div class="component right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
</p>
<p>
Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
</p>
</div>
</div>推荐答案
flex等高列具有–这是align-items: stretch(伸缩容器的默认设置)的结果.仅适用于同一行上的弹性项目.
The flex equal height columns feature – which is the result of align-items: stretch, a default setting of a flex container – applies only to flex items on the same row.
它不适用于多行flex容器中的项目.规范中定义了这种行为:
It doesn't work for items in a multi-line flex container. This behavior is defined in the spec:
在多行flex容器(甚至只有一行的容器)中， 每行的交叉大小是包含 弯曲行上的项目(由于align-self而对齐后)，并且 线在flex容器内与align-content对齐 属性.
In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.
换句话说，当基于行的flex容器中有多行时，每行的高度(交叉尺寸" )是"包含的最小尺寸行上的弹性项目"..
In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".
此外，由于align-items: stretch沿横轴工作，因此等高线列功能在横轴为水平的flex-direction: column中无用.
In addition, because align-items: stretch works along the cross-axis, the equal height columns feature is useless in flex-direction: column, where the cross-axis is horizontal.
要在多行上实现等高的列/行，请考虑使用Javascript解决方案.
To achieve equal height columns/rows across multiple lines consider a Javascript solution.
但是，在不了解您的总体目标的情况下，这是一种在当前布局中实现等高行的简单方法:
However, without knowing much about your overall objective, here's a simple way to achieve equal height rows in your current layout:
这篇关于伸缩方向上等高的行:列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！