弹性列中的等高弹性项目 [英] Equal height flex items in flex columns

问题描述

我正在尝试使列中的列表项在其列表中具有相同的高度.

这是我所拥有的:

<li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ol>奥尔{最小高度:100%；显示:弹性；弹性方向:列；}奥利{弹性:1；}

我尝试过:我尝试按照本教程进行操作:https://css-tricks.com/boxes-fill-height-dont-squish/ 无济于事.我认为问题在于必须为每个父元素设置 height: 100% 一直到 html.可以吗?

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

我也尝试过:仅使用 div 而不是列表来完成此操作.仍然没有运气.

有什么线索吗?

解决方案

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

ol { 最小高度:100%；}

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

HTML(无变化)

<li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ol>

CSS

html, body { 高度:90%;}/* 新的;需要儿童百分比身高工作；设置为 90% 仅用于演示目的 */奥尔{最小高度:100%；显示:弹性；弹性方向:列；}奥利{弹性:1；}

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

<块引用>

我认为问题在于必须将 height: 100% 设置为每个单父元素一直到 html.可以吗?

是的，没错.如果使用百分比高度，则需要为每个父元素指定高度，一直到根元素 (html).我在这里解释了原因:

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

<块引用>

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

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

I am trying to make it so list items in a column have equal height inside their list.

Here is what I have:

<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;
}

I have tried: I have attempted to follow this tutorial: https://css-tricks.com/boxes-fill-height-dont-squish/ to no avail. I think the trouble has to do with having to set height: 100% to every single parent element all the way to html. Can that be right?

My list is deeply nested and setting all those heights breaks the layout. I would prefer to work only with fluid heights.

I have also tried: accomplishing this with just divs instead of a list. Still, no luck.

Any clues?

解决方案

Since you're using a percentage height on the flex container...

ol { min-height: 100%; }

... you need to also define a height for the parent and root elements.

HTML (no changes)

<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;
}

DEMO: http://jsfiddle.net/kzL4305k/1/

I think the trouble has to do with having to set height: 100% to every single parent element all the way to html. Can that be right?

Yes, that is correct. If you use percentage heights you need to specify the height for every single parent all the way up to the root element (html). I've explained the reason for this here:

• Working with the CSS height property and percentage values

My list is deeply nested and setting all those heights breaks the layout. I would prefer to work only with fluid heights.

You don't need to set the height for parent elements if you don't use percentages. Try using min-height in pixels on flex containers, then letting flex-grow: 1 deal with the height issue for flex items.

这篇关于弹性列中的等高弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！