柔性柱中的等高柔性项目

Question

我试图让它成为列中的列表项在列表中具有相同的高度.

这是我有的:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

我试过:我试图遵循这个教程:https://css-tricks.com/boxes-fill-height-dont-squish/无济于事.我认为麻烦与必须设置高度:100%到每个单个父元素一直到html.那可能是对的吗？

我的列表是深层嵌套的,并设置所有这些高度打破了布局.我宁愿只使用流体高度.

我也试过:用div而不是列表来完成这个.不过,没有运气.

有线索吗？

Answer 1

由于您在flex容器上使用百分比高度...

ol { min-height: 100%; }

...您还需要为父元素和根元素定义高度。

HTML（无变化）

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

的CSS

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
                              set at 90% just for demo purposes */
ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

演示：http : //jsfiddle.net/kzL4305k/1/

我认为麻烦在于必须将height: 100%所有父元素都设置为html。可以吗？

对，那是正确的。如果您使用百分比高度，则需要一直指定每个单亲的高度，直到根元素（html）。我在这里解释了原因：

• 使用CSS height属性和百分比值

我的清单嵌套得很深，设置所有这些高度会破坏布局。我宁愿只在流体高度下工作。

如果不使用百分比，则无需为父元素设置高度。尝试min-height在flex容器上使用像素，然后flex-grow: 1处理flex物品的高度问题。

Answer 2

这是将弹性项目设置为相等高度的最简单方法。

display: flex;
justify-content: center;
align-items: stretch;