【CSS】column-gapで横並びにした要素の間隔を自動で調整

HTML/CSS

今までのブログでは、ファーストビューやグローバルメニューの作成をまとめていました。

ファーストビュー が終わったら、次はその下のレイアウトを作っていくことになります。

 

割とよくあるのが「このようなことでお困りではないですか?」という共感エリア。

そこで要素が3つほど横並びになっているパターンがありますが、それを作っていきたいと思います。

 

See the Pen
column-gap flexbox
by bat (@bat20190608)
on CodePen.

やることは、下の2つです。

  • display: flex; で横並びにする
  • column-gap を使って要素間の余白を均等に設定

 

display: flex; で横並びにする

flex boxについては、詳細に書いてあるサイトがたくさんありますので、ここでは簡単に「要素を横並びにできる方法」と紹介しておきます。

(縦並びの指定もできます)

こちらのサイトはとてもわかりやすく書いてありますね。

https://webdesign-trends.net/entry/8148

均等に要素を並べる方法としては、よくあるのがjustify-content: space-between; で横幅全体を使って均等割する方法でしょうか。

この方法でも良いのですが、あくまで「均等割」なので、要素のサイズによっては間延びした感じになったり、やけに詰まった感じになってしまうことがあります。

 

column-gapで要素の間隔を自動調整

column-gap のいいところは、ギャップのサイズを変更すると、自動で要素のサイズを調整してくれるところです。

ただし、imgobject-fit: cover; を設定しておくことが必要なのでお忘れなく。

(↓object-fit: cover;  についてのおすすめサイト)

https://www.webcreatorbox.com/tech/object-fit

 

これにより、ディスプレイのサイズが変わっても画像間の幅は変わらず、画像自体が可変することでバランス良く配置してくれます。

一般的には「画像にmargin-rightを設定して、最後の画像だけlast-child margin0にする」みたいなのが主流だったと思います。結構理解するのに時間がかかります。

とっても簡単なので、ぜひ活用してみてください!

タイトルとURLをコピーしました