CSS3 Flex - 拉伸宽度和高度答案

【问题标题】：CSS3 Flex - Stretch Width and HeightCSS3 Flex - 拉伸宽度和高度
【发布时间】：2014-01-22 16:47:19
【问题描述】：

我想使用 CSS3 Flex 模型制作一个全屏日历应用程序。虽然我可以使日历在水平方向上非常适合，但我无法找到一种方法也让日历周等比例拉伸以消耗所有可用高度。

这是一个 jsFiddle 来说明我的困境：http://jsfiddle.net/CgXLa/

每周平均分配直到我让他们display: flex;。即使我将所有的日子都包含在一个 div 元素中，并将其改为 display: flex; 而不是每周，我仍然遇到同样的问题。

我如何使用 Flex 模型来水平拉伸和垂直？

【问题讨论】：

另外，如果任何拥有 1500+ 声誉的人都可以创建 css-flex 标签，那就太好了。
标签已经存在，是flexbox
@vals 谢谢，这里挤满了所有 Adobe/Macromedia Flex 的东西。
你为什么在这里使用 Flexbox？日历是表格数据。
@cimmanon 主要是因为我讨厌桌子。而且，根据你所说的数据，我的日历不会包含任何内容。

标签： html css flexbox

【解决方案1】：

这是我的解决方案。

我在几周左右移除了一个额外的包装。现在，weeks 和 the th 都是 calendar 的直系后代

<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>
    ....

现在我的 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;    
}

关键是给第 th 元素一个确定的高度（flex-basis: 30px）但没有 flex-grow，并且一周开始也有一些高度，但是 flex-grow: 1。

这使得星期在它们之间平均占用日历中未使用的所有剩余空间。

updated fiddle

【讨论】：

非常感谢！正是我想要的！
很高兴它有帮助！
感谢您 - 自动拉伸宽度，关键是将每个 flex 子项的宽度设置为 100%。