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

问题描述

我试图让列表中的项目在列表中有相同的高度。

以下是我的：

 < ol> 
< li>清单项目1< / li> 
< li>清单项目2< / li> 
< li>清单项目3< / li> 
< / ol> 
 
 ol {
 min-height：100％; 
 display：flex; 
 flex-direction：column; 
} 
 
 ol li {
 flex：1; 
 
 
 
 $ b我已经试过了：我试图按照这个教程： https://css-tricks.com/boxes-fill-height-dont-squish/ 无济于事。我认为麻烦必须与必须设置高度：100％到每一个父元素一直到HTML 。这是正确的吗？
 
我的列表是深深的嵌套，并设置所有高度打破布局。我更喜欢只用液体高度工作。
 
 
 
我也试过：用div而不是列表来完成这个工作。还有，没有运气。
 
 
任何线索？
解决方案
在弹性容器上使用百分比高度... 
 
 
  ol {min-height：100％; } 
  
 ...您还需要 
 
 
  HTML （无变化） p> 
 
 
 < ol> 
< li>清单项目1< / li> 
< li>清单项目2< / li> 
< li>清单项目3< / li> 
< / ol> 
  
  CSS   
 
  html，body {height：90％; } / * NEW;儿童百分比高度需要工作; 
设定为90％，仅用于演示目的* / 
 ol {
最小高度：100％; 
 display：flex; 
 flex-direction：column; 
} 
 
 ol li {
 flex：1; 
 
  
 DEMO： http://jsfiddle.net/kzL4305k/1/  
 
 
 
 
 I认为麻烦必须做必须设置 height：100％到每个
单个父元素一直到html 。那可以吗？  
 
是的，这是正确的。如果使用百分比高度，则需要指定每个单独父项一直到根元素（ html ）的高度。我已经在这里解释了原因： 
 
 
 
 
 使用CSS  height 属性和百分比值 
 
 
 
 
 
 
 
我的列表是深深嵌套的，并且设置所有这些高度将打破
布局。 
 
 
如果您不需要设置父元素的高度使用百分比。尝试在flex容器上以像素为单位使用 min-height ，然后让 flex-grow：1 处理高度问题弹性项目。  
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屋！