今日のコーディングの学び

こんばんは。
今日はHTMLとCSSを少し勉強しました。

なんだっけこれ？となったものをまとめます。

justify-content

Flexboxで水平方向の配置を調整するプロパティ
※Flexboxのやり方はdisplay:flex;

値は6つでその中から今回はcenterを使いました。

• flex-start(初期値)：行の始まるところから配置。つまり左揃え。

• flex-end：行の終わるところから配置。つまり右揃え。

• center：中央揃え

• space-between：最初と最後の両端に要素が配置され、残りの要素は空白が均等になるように自動で配置される。

• space-around：上記とは異なり、両端の子要素も含めて空白が均等になるように配置される。（両端にも空白ができる）

gap

FlexboxとCSSグリッドを使用する際に使えるプロパティ
子要素間の余白のサイズを調整できる。
上下左右の端は親要素のコンテナの枠に揃うので指定した余白は入らない。

今までmarginで余白を設定していたのですが、gapを使えば空白サイズが同じであれば一括で余白サイズを指定できて便利そうですね。

gapのメリットとは？

参考になりそうな記事を見つけました。

[CSS] gapって使っていいの？

レスポンシブを考えたときに便利そうです。
自動で綺麗に揃えてくれるのですね。
見た目上は等間隔だけどデザインが少し変更したときに間隔も調整が必要そうな部分にはgapは合わないかも、ということでしょうか。

これはやってみないことには分からないところですね。
実践する機会がこれから楽しみです。