弹性列中的等高弹性项目

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/ 无济于事。我认为问题与 必须设置 height: 100% 到每个父元素一直到 html 有关。可以吗？

我的列表嵌套很深，设置所有这些高度会破坏布局。我宁愿只使用流体高度。

我也尝试过：仅使用 div 而不是列表来完成此操作。尽管如此，还是没有运气。

有什么线索吗？

Answer 1

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

ol { min-height: 100%; }

...您还需要define a height for the parent and root elements。

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)。我在这里解释了原因：

• Working with the CSS height property and percentage values

我的列表嵌套得很深，设置所有这些高度打破了 布局。我宁愿只使用流体高度。

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

Answer 2

只需添加以下css

ol {  
     display: -webkit-box; 
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: stretch;
     -webkit-align-items: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
ol li {
     background: gold;
     padding: 5px 5px;
     margin: 5px 5px;
     width: 25% 
}

Answer 3

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

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