Html 带有 ul 列表的 CSS3 内联 flexbox？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21685914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 inline flexbox with ul list?
提问by Miles M.
I'm trying to set up a left meny where the lielements stretch to the entire height of the screen whatever the size of the screen.
我正在尝试设置一个 left meny，li无论屏幕的大小如何，元素都可以拉伸到屏幕的整个高度。
I can't have the li elements filling the whole height of the screen with the css3 flex property. I've been looking at a good documentation here:
我不能让 li 元素用 css3 flex 属性填充整个屏幕高度。我一直在这里查看一个很好的文档：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working with a ullist of elements. Don't know if this is causing the problem ..
我正在处理ul元素列表。不知道是不是这个问题。。
This is what I'm trying to do:
这就是我想要做的：
#left-drawer-menu {
width: 100%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
min-height: 100px;
height: 20%;
}
<ul id="left-drawer-menu">
<li data-icon="contacts"><span class="km-icon km-mostrecent"></span>Available 1</li>
<li data-icon="globe"><span class="km-icon km-mostviewed"></span>Available 2</li>
<li data-icon="camera"><span class="km-icon km-organize"></span>Available 3</li>
<li data-icon="organize"><span class="km-icon km-featured"></span>Available 4</li>
<li data-icon="settings"><a href="#profile"><span class="km-icon km-action"></span>Available 5</a></li>
</ul>
Thanks for your help.
谢谢你的帮助。
采纳答案by vals
You need to :
你需要 ：
a) set height 100% to all the elements chain, including the ul, the body and the html
a) 将所有元素链的高度设置为 100%，包括 ul、body 和 html
b) set at least flex-grow to the elements
b) 至少为元素设置 flex-grow
body, html {
height: 100%;
padding: 0px;
}
#left-drawer-menu {
width: 100%;
height: 90%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
flex-grow: 1;
}
