Day 7-CSS入門 フレックスボックス編

★本日の学習成果まとめ

・フレックスボックスは必須の知識。display:flexでフレックスボックスを多用し割と簡単なHPは作成可能。display:flexとdisplay:inline-flexは絶対覚えよう。

・bodyタグをフレックスボックスにしてやれば、中の要素すべてがフレックスアイテムになり、任意の場所に表示させることができる大変便利なもの。
flex-directionで横方向の始点→終点を変更、justify-contentで主軸のからどのように始めるか、align-itemsで縦方向の始点→終点を変更。

・flex-itemはコンテナ内に収まるように自動的にサイズが調整される。
サイズを変えたくない時はflex-wrapで改行してitemを表示させることができる。

・gapプロパティでitem間の隙間を調節可能。calc (100 - 10 - 10)みたいな感じ。

・align-selfで任意のitemだけを中央に持ってきたり、偶数のアイテムだけを反対側に表示させたりすることができる。

・orderプロパティでHTMLを変更せずに要素の順番を入れ替えることができる。

★備忘録ノート

・フレックスボックスというのがCSSのスタイルでよく使われる。display:flexで定義することでフレックスボックスになる。どの要素に対しても定義可能。フレックスボックス内のことをフレックスコンテナと呼び、その中の一つ一つの要素をフレックスアイテムと呼ぶ。フレックスボックスはBlock要素なので、2つ作ると縦に並ぶが、inline-flexとすればinline要素として横に並べることができる。

▽ここからはflex-containerにたいしてのプロパティ

・flex-directionでflex-itemの始まりの位置を調節することができる。厳密にいうと、主軸の始点を変えることでitemの始点を変える。rowで左上から右へ、row-reverseで右上から左へ、columnで左上から下へ、column-reverseで左下から上へ。あれ、右上から下とか右下から上とかは？

・justify-contentで主軸に対してどこから始まるか決めることができる。flex-start、end、center、space-between(等間隔)がある。

・align-itemsによって交差軸の始点を決めることができる。これで、悩んでた右下から上への動作ができる。flex-start、end、centerがある。よく使うのが、justify-content:centerとalign-items:centerを組み合わせて、content-boxの真ん中にitemを配置するやり方。

・flex-box内のitemはデフォルトでcontainer内に収まるように自動的に小さくなるようになっている。しかし、contentsの幅を変えたくない時には、flex-wrapで下に改行してitemを表示することができる。

・gapプロパティでitem間の隙間を指定することができる。単純にpxで指定してもいいが、calcで自動計算させる手法が一般的。

・グリッドレイアウトを使えば、flex-itemをきれいに並べることが簡単にできるようになるらしい。

▽ここからはflex-itemにたいしてのプロパティ

・align-selfで縦方向のitemに対して個々に場所を設定できる。便利。

・orderプロパティで並び順を変えられる。小さい順に指定することができる。HTMLを変更しなくてもCSSで変更することができる。