WEB制作

【CSS】flexで並べた要素間の余白設定はgapが便利 

スポンサーリンク

gap

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

 

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

 

余白というと、margin や padding などを思い浮かべると思いますが、
gapという余白設定も利便性がありますので、注目してみましょう。

 

それではさっそくいきましょう。

 

gap の利便性

gap は、行や列の間のすき間(余白)を定義します。

何が便利かというと、単純に要素間のすき間の値を考えればいいので、とても直感的で使いやすいです。

 

marginだと、複数の要素を並べたとき、最後の要素だけ余白をなくすために last-childを使うとか、
レイアウトによっては要素の外側の余白を考えなければいけないとか、手間がかかるケースがあります。

 

 

justify-content では不便?

下のコードペンで、justify-content と gapのコードを書いたので見てみましょう。

ヘッダーのメニューリストをイメージしました。
※0.5倍で見てとわかりやすいです。

See the Pen
flex-sa&sb
by t.h (@tomtom15)
on CodePen.

ブラウザを広げたり、狭めたりしてみるとわかりやすいですのですが、
space-around や space-between の余白は、ブラウザの大きさに応じて余白が変動します。

 

ですので、ブラウザ幅を広げると、要素間の余白が間伸びしたり、
逆に狭めると、要素間の余白が無くなり、くっつきすぎてしまうこともあります。

 

しかし、space-aroundやspace-betweenを使わず、gapを使って余白の値を固定することで、余白を一定に保つことができます。

 

display:grid と組み合わせてもOK

下のコードペンのように display:grid; と組み合わせるとできることが増えます。

※記事の内容からそれてしまうので、コードの解説は省略します。

See the Pen
grid-gap
by t.h (@tomtom15)
on CodePen.

 

同じ要素を、数多く列挙するときは便利だと思います。

列方向の余白、行方向の余白、それぞれ設定できます。

余白の値は、pxのような絶対値でなく、% や remにしてもOKです。

 

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

まとめ

ということで、今回はgapの紹介でした。

使い方は簡単ですので、ケースバイケースで、justify-content と gap を使い分ければいいと思います。

 

CSSでグリッドを使う方法を紹介しておきます。

スポンサーリンク

-WEB制作
-, , , ,

© 2024 人生フリーハンド Powered by AFFINGER5