CSS3 Flex - 伸縮幅と高さ

Question

CSS3 Flexモデルを使用してフルスクリーンカレンダーアプリケーションを作成したいと思います。私はカレンダーを水平にうまくフィットさせることができますが、カレンダーの週を均等に伸ばして、利用可能な高さをすべて消費させる方法も見つけられません。私はそれらdisplay: flex;作るまで数週間が均等に分散されているhttp://jsfiddle.net/CgXLa/

：

は、ここに私のジレンマを説明するjsFiddleです。私がすべての日を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;  
} 

キーは番目の要素に明確な高さ（フレックス基礎：30px）を与えることであるが、無フレックス・グロース、週の高さもいくつか始まりますが、フレックス・グロース：1.

残りのスペースはすべて残りのスペースを均等に使用しないカレンダーから取り出します。また

updated fiddle