Flexコンテナの設定
Flexの基本セット
Flexの基本セットとしてプロパティを覚えると良いでしょう。
「flex-flow」プロパティは一括設定なので、値が2つあります。
Flexコンテナのセレクタ{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}justify-contentプロパティの値と整列・間隔の違い
See the Pen 15-1-10 by Rayout-gw (@Rayout-gw) on CodePen.
align-itemsプロパティの特徴
縦方向に対する整列で、flex-flow : nowrap;の時に使います。
追加オプションとして覚えておくと良いでしょう。
See the Pen 15-1-11 by Rayout-gw (@Rayout-gw) on CodePen.
align-itemsの説明で、「baseline（アイテムの文章の下行に揃える）」としていましたが、通常のように使用すると、上記の例のように表示されます。
正しくは、「baseline（アイテムの1行目の文章の下辺（ベースライン）に揃える）」となり、コンテナの上辺へ吸い付くように配置されます。
また、この時、下記の例ように1箇所だけ、あるいは複数の箇所のアイテムの上パディングが異なっていた場合、一番大きなボックスの高さを持つアイテムがコンテナの上辺に吸い付き、他のアイテムは1行目のベースラインで整列します。
See the Pen 15-1-12 by Rayout-gw (@Rayout-gw) on CodePen.
文字のベースラインをわかりやすく、文字サイズを変えて検証してみます。
文字サイズが大きい箇所で、自動改行されても1行目のベースラインで整列しているのが確認できます。
See the Pen 15-1-13 by Rayout-gw (@Rayout-gw) on CodePen.
正直、使う場面が今のところ思いつきませんでした…
align-contentプロパティの特徴
縦方向に対する整列で、flex-flow : wrap;の時に使います。
justify-contentプロパティの対になるもので、追加オプションとして覚えておくと良いでしょう。
flex-flow:rowとjustify-content:flex-startの場合
See the Pen 15-1-14 by Rayout-gw (@Rayout-gw) on CodePen.
flex-flow:columnとjustify-content:flex-startの場合
縦に並べると、横軸と縦軸が入れ替わるので、justify-content:flex-startの左揃えは上揃えに入れ替わって、align-contentプロパティは横方向の整列になります。
See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
複雑で混乱しますね..
でもこれでcolumnがある理由も少しわかりました。