![見出し画像](https://assets.st-note.com/production/uploads/images/112464125/rectangle_large_type_2_05b80601cd1fcccf5c133c6117c4a7e6.png?width=1200)
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で変更することができる。
この記事が気に入ったらサポートをしてみませんか?