flexbox その２

flexboxを改めてやる。以下のサイトの記事を読んだ。

coliss.com

flexアイテムとflexコンテナ

flexコンテナは多数のflexアイテムを内包する。flexコンテナにしたい要素に display: flex;を設定する。
すると子要素は自動的にflexアイテムになる。

並べる方向

flex-direction: row;　で横方向に並べる。 row-reverseなら右から左になる。columnで上から下。column-reverseで下から上。

1行に収めたい

flex-wrap: nowrap; で１行に収める。flexアイテムの幅は一行に収まるように縮まる。

flex-wrap: wrap;だと複数行

まとめて設定

flex-flow: row nowrap;

右づめで表示したい。

justify-content: flex-end;　でdirectionがrowなら右づめになる。flex-startなら左づめ、centerなら中央、space-betweenなら等間隔に間をあけて表示される。space-aroundなら端っこにも空間があいた等間隔。

横にならべておいてアイテムの高さはコンテナいっぱいにひろげたい。

横に並べている(row)のときの縦をクロス軸と呼ぶ。
align-items: stretch;　を設定すれば良い。
縦方向は上詰めにしたい場合はalign-items: flex-start;。下詰めにしたいときはflex-end。縦方向に中央に配置したい場合はcenter。baselaineに沿わせるならbaseline。

横にならべておいて、複数行の行間を調整したい。

align-content: stretch;　コンテナの高さに基づいて均等配置。flex-startなら上からつまる。flex-endなら下からつまる。centerは中央。上端から下端で等間隔ならspace-between。上端と下端で端っこにも空間があいた等間隔ならspace-around。

アイテムの並び順

アイテムに対して order: 2; 等と設定。

アイテムの幅の比率

アイテムに対して flex-grow: 1;　等と設定。デフォルトは0
他のアイテムに対して縮まるかはflex-shrink: 1;等と設定。デフォルトは1

アイテムの幅の設定

アイテムに対してflex-basis: 350px; で350に、flex-basis: auto;なら自動計算。

glow, shrink, basisはまとめてflex:で指定できる。

デフォルト値なら flex: 0 1 auto;

アイテムを指定して並べ方を指定

align-self