Question

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

这是一个说明我的困境的问题：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。

这使得周数可以从日历中未使用的所有剩余空间中均匀占用。

<强> updated fiddle

CSS3 Flex - 拉伸宽度和高度

1 个答案: