gapプロパティはCSS余白界の最適解になり得る
奥深い余白の実装、人によってかなり書き方が違うと思います。
そんな中、『flexboxレイアウト、これが最適解では？』と思えるgapプロパティのご紹介です。
目次
gapはflexboxレイアウトで使える新しいプロパティ
今までの余白指定
私は以下のような実装をすることが多いです。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="boxWrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.boxWrap { width: 400px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { width: calc(25% - (30px / 4)); height: 60px; background-color: #da6d0a; &:nth-child(-n+4) { margin-bottom: 10px; } } |
calc関数でwidthから余白を除いて横幅を指定し、
親要素にjustify-content: space-between;を指定することで横の均等な余白を実現しています。
また縦の余白ですが、上段の４つにのみmargin-bottom: 10px;を指定しています。
一見、分かりやすく見えるこちらの実装ですが、space-betweenで対応できない場合は結構あります。
例えば要素が中途半端な数だったとき。
CMSなどではあり得るシチュエーションです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.boxWrap { width: 400px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { width: calc(25% - (30px / 4)); height: 60px; background-color: #da6d0a; &:nth-child(-n+4) { margin-bottom: 10px; } } |
本来、左詰めになる必要がありますが、変にバラけて配置されてしまいます。
そうした場合は、右側に端っこの要素以外に余白を設定する方法を採用していました。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.boxWrap { width: 400px; display: flex; flex-wrap: wrap; justify-content: flex-start; } .box { width: calc(25% - (30px / 4)); height: 60px; background-color: #da6d0a; &:not(:nth-child(4n)){ margin-right: 10px; } &:nth-child(-n+4) { margin-bottom: 10px; } } |
割と直感的に分かりやすい反面、
レスポンシブ化などで列数が減ったとき、指定をしなおすのが面倒&コードが読みにくくなるデメリットあり。
gapでの新しい余白指定
それではgapプロパティを見ていきましょう。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.boxWrap { width: 400px; display: flex; flex-wrap: wrap; gap: 10px; } .box { width: calc(25% - (30px / 4)); height: 60px; background-color: #da6d0a; } |
これだけでOK。余白が上下それぞれ10px。なんてシンプル！
レスポンシブ化するときもカンタン。分かりやすい。
可読性に優れ、変更にも強いgapはまさしく余白界の救世主。
コーディング担当者が変わっても、パッと見ただけでわかります。
ショートハンドが苦手なら1つ1つ書いてもOK！
gapプロパティはmarginの指定みたいにショートハンドで記述できますが、
パッと見でわかりにくい場合は、1つ1つ書くのもアリです。
|
1 2 |
// 上下左右 10px gap: 10px; |
marginと同様、一行で書けば上下左右。
2つ、3つ、4つに分けて書けば以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
// gap: [上下] [左右]; gap: 10px 20px; // gap: [上] [左右] [下]; gap: 10px 20px 5px; // 時計回り // gap: [上] [右] [下] [左]; gap: 10px 20px 5px 15px; |
ほぼすべての主要ブラウザに対応！（IE11は残念ながら非対応）
比較的新しいCSSを実装するときに気にするのが『ブラウザの対応状況』。
いつものことではありますがIE11は非対応です。残念。
個人的にCSSのobject-fitとgap、JSのasync/awaitは早くIE11対応してほしいところです……！
ただ、Google Chrome、Safari、Firefox、Edgeなどの主要ブラウザはカバーされていて、
案件でも充分に導入できるレベルだと思います！
（案件の動作保証ブラウザをチェック！）
まとめ
- gapはシンプルにflexboxの余白が設定できる
- ほとんどの主要ブラウザでは使える
- ただし、IEは非対応
関連記事
記事を書いた人
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。