重要な点

常に単に縦に並べるだけなら flex layout はいらない。

適用箇所

たくさんの項目をできるだけ詰め込む場合 flex layout はあらゆるスクリーンサイズへの対応で大きな活躍をする

min-width 及び適切な範囲でのグループ化を行なったら、あとは flex によるレイアウトに身をまかせる。

flex になったボックス内で width: 100%; や height: 100% が効かない

flex プロパティが指定されている要素を親に持つ要素に width: 100% や height: 100% を指定しても効かない (computed が 0 になる) ことがある。

flex box の仕様のなかでどこに書いてあるのかよく読めてないが、flex 指定された要素 (flex item) の見掛け上の大きさと、子要素に対する計算上の大きさが違うようで、どうしよもない。

同じことをやりたい場合、flex 指定した要素 (flex item) を position: relative に指定し、子要素を position: absolute; top: 0; left: 0; right: 0; bottom: 0; とすれば、この子要素の width/height が確定し、子要素の子要素 (flex 指定された要素の孫要素) では正しく width/height の % 指定が効くようになる。

flex item のサイズが計算されるさい、子要素のサイズを計算しようとするが、このとき子要素が%指定されていても、まだ親のサイズが決まっていないためゼロになる？

とりあえず、このテクニックは多様する。