CSS3 Flex - 拉伸宽度和高度

Question

我想使用CSS3 Flex模型制作全屏日历应用程序.虽然我可以使日历在水平方向上非常合适,但我找不到让日历周以相同比例拉伸以消耗所有可用高度的方法.

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

在我制作它们之前,这几周是平均分配的display: flex;.即使我把所有的日子都包含在一个div元素中display: flex;而不是每周都这样做,我仍然会遇到同样的问题.

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

Answer 1

这是我的解决方案.

我已经在几周内删除了一个额外的包装器.现在几周和周日都是日历的直接后裔

<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;    
}

关键是给第一个元素一个确定的高度(flex-basis:30px),但没有flex-grow,而且周也有一些高度开始,但是flex-grow:1.

这使得周数从周围没有使用的日历中获取所有剩余空间,均匀地在它们之间.

更新小提琴