今回はQiitaに記事を書いてみたかったので、お試し投稿として、Flexboxについてまとめます。
なんかFlexboxって、なんか魔法みたいな感じしたので、自分の為のアウトプットです。
基本的なことだけ書きたいと思います。初心者なのでお手柔らかにお願いします。
Flexboxとは
整理したい奴らの「親要素」に適用すると、そいつらが整理される
つまり「親が支配して子を整列させる」仕組み。
子要素の子要素には適用されません
具体的いうと：
要素の並び方（横 or 縦）、位置揃え（中央・端）、間隔などを簡単に調整できる
Flexboxにおいてよく使うプロパティ
flex-direction: ...;
これは並ぶ方向を決めるコード
...に入るコード
|row（デフォルト）| 横並び
|column | 縦積み
|row-reverse または column-reverse | 逆順
justify-content: ...;
これは、並んだ要素達をどこに配置するか決めるコード
・もし要素の並び方が row(横並び) なら→ flex-start で左に寄る
・もし要素の並び方が column(縦並び) なら→ flex-start で上に寄る
要素の並び方でコードの使い方が変わります。
...に入るコードは他にこんなのがあります
| center | 中央揃え
| flex-end | 右寄せ（縦なら下）
| space-between | 両端揃え、間を均等
| space-around | 周囲に均等な余白
| space-evenly | 要素間・外側すべて均等
align-items: ...;
これも、並んだ要素達をどこに配置するか決めるコード
・もし要素の並び方が row(横並び) なら→ flex-start で上に寄る
・もし要素の並び方が column(縦並び) なら→ flex-start で左に寄る
...に入るコードは他にこんなのがあります
|center | 中央揃え
|flex-end| 下揃え
|stretch | 高さを自動で揃える
justify-contentとalign-itemsはなんか似ていてややこしいですが
縦に並べた場合を例に取ると
要素
要素
要素
要素
要素
要素
要素
justify-content は積まれた要素の頭側や足側を動かすイメージ
align-items は積まれた要素の腹を動かすイメージ
と考えると理解しやすいのかもなと思いました。横に並んでても同じイメージでいけます。
子要素（アイテム）側の設定
flex: 1;
→ 幅を均等に分ける
gap: 8px;
→ Flexbox内の要素同士の間隔を簡単に設定できる
とこんな感じで、深ぼればもっとたくさんの使い方があるようですが、初回の投稿なのでここまでにしたいと思います。
読んでくださってありがとうございました！