html - CSS3 Flex - 拉伸(stretch)宽度和高度

Question

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

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

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

如何使用 Flex 模型在水平和垂直方向拉伸(stretch)？

Answer 1

这是我的解决方案。

我已经删除了大约几周的额外 wrapper 。现在周和日都是日历的直接后代

<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，week也有一些高度开始，但是flex-grow: 1。

这使得周从日历中平均分配未被 th 使用的所有剩余空间。

updated fiddle