web-dev-qa-db-ja.com

CSS3 Flex-幅と高さをストレッチ

CSS3 Flexモデルを使用して、フルスクリーンのカレンダーアプリケーションを作成したいと思います。カレンダーを水平方向にうまく合わせることができますが、カレンダーの週を同じ比率で伸ばして、使用可能なすべての高さを消費する方法を見つけることができません。

これが私のジレンマを示すjsFiddleです： http://jsfiddle.net/CgXLa/

週はuntilまで均等に分配されますdisplay: flex;。すべての日をdiv要素に含め、それをdisplay: flex;毎週ではなく、同じ問題がまだ発生しています。

Flexモデルを使用して、水平方向との両方を垂直方向にストレッチするにはどうすればよいですか？

htmlcssflexbox
14
Micah Henning

これが私の解決策です。

何週間か余分なラッパーを削除しました。今週と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>
    ....

今私の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要素に一定の高さ（フレックスベース：30px）を与えるが、フレックスグローを与えないことです。また、週も最初はある程度の高さですが、フレックスグロー：1。

これにより、週はthで使用されていないカレンダーの残りのスペースをすべて均等に使用します。

更新されたフィドル

19
vals