Html CSS3 Flex - 拉伸宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20930359/
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 Flex - Stretch Width and Height
提问by Micah Henning
I'd like to make a full screen calendar application using the CSS3 Flex model. While I can make the calendar fit quite nicely horizontally, I can't find a way to also let the calendar weeks stretch in equal proportion to consume all the available height.
我想使用 CSS3 Flex 模型制作一个全屏日历应用程序。虽然我可以使日历在水平方向上非常合适，但我找不到一种方法也让日历周以相等的比例伸展以消耗所有可用的高度。
Here's a jsFiddle to illustrate my dilemma: http://jsfiddle.net/CgXLa/
这是一个 jsFiddle 来说明我的困境：http: //jsfiddle.net/CgXLa/
The weeks are equally distributed untilI make them display: flex;. Even if I encompass all of the days into a divelement and make that display: flex;instead of each week, I still have the same problem.
周平均分配，直到我完成它们display: flex;。即使我把所有的日子都包含在一个div元素中，display: flex;而不是每周，我仍然有同样的问题。
How can I use the Flex model to stretch both horizontally andvertically?
如何使用 Flex 模型进行水平和垂直拉伸？
回答by vals
Here is my solution.
这是我的解决方案。
I have removed an extra wrapper around weeks. Now the weeks and the th are all direct descendants of calendar
我已经移除了大约几周的额外包装。现在周和 th 都是日历的直接后代
<main id="calendar">
<section class="th">
<span>Sunday</span>
<span>Monday</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Thursday</span>
<span>Friday</span>
<span>Saturday</span>
</section>
<div class="week">
<div></div>
<div></div>
<div></div>
<div data-date="1"></div>
<div data-date="2"></div>
<div data-date="3"></div>
<div data-date="4"></div>
</div>
....
Now my CSS is
现在我的 CSS 是
/* Calendar 100% height */
#calendar { height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
}
.th {
flex: 30px 0 0;
}
.week {
flex: 30px 1 0;
border-bottom: 1px solid #ccc;
}
The key is to give the th element a definite height (flex-basis: 30px) but no flex-grow, and the week also some height to start with, but flex-grow: 1.
关键是给第 th 元素一个确定的高度（flex-basis: 30px）但没有 flex-grow，并且一周也有一些高度开始，但是 flex-grow: 1。
This makes the weeks take all the remaining space from calendar not used by th, evenly between them.
这使得周从日历中占用所有未使用的剩余空间，在它们之间均匀分布。
