プログラミング

【CSS】flexで並べた要素間の余白はgapを使おう marginより便利です 

スポンサーリンク

gap

プログラミングを勉強中のみなさん、こんにちは!

今回は、flexの余白設定で使える「gap」について紹介します。

余白と言えば

flexで要素を並べたときに、思い浮かぶ余白設定は、

justify-content: space-between;
justify-content: space-around;

あとは、
margin
とかですかね。

気づいたこと

これは私の場合ですが、

space-betweenなどの余白は、
ウィンドウ幅を広げると、要素間のスペースが間伸びしたり、
狭めると、要素同士の余白が無くなり、くっついてしまったりします。

marginは、上下左右の設定を考えなくてはいけません。

この辺りがしっくり来ず、気になっておりました。

gapプロパティ

そこで、「gap」の存在を知りました。
例えば、
「display: flex;」とセットで
「gap:30px」を設定すると、
要素間の余白が30pxになります。

何が便利かと言うと、あくまで要素間の余白なので、要素の外側(並べた要素と接しない方)の余白は気にしなくてOKです。
そして、ウィンドウ幅を広げても狭めても、この30pxの余白は常に保たれます。

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

まとめ

ということで、今回は、gapプロパティでした。
紹介した使い方は一例ですので、いろいろサイトを見てみてください。

flexとgap

ブロック要素関連で、cssでグリッドを使う方法を紹介しておきます。

スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5