BLOG

使わないとかない!flexでの間隔の設定が簡単にできるgap!

| HTML / CSS

みなさんflex使ってますか?
簡単に横並びや段落ちとかするのに便利なflex!ですが
みなさん間隔はどうあけてますか?
僕はいままでは

.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 950px;
}

.item{
  width: 300px;
}

.item:not(:nth-of-type(3n+1)){
  margin-left: 25px;
}
.item:nth-of-type(n+4){
  margin-top: 25px;
}

ってこんな感じで、やってました。
親要素に、flex設定して、折返しあり
子要素の幅を指定して
子要素の3の倍数+1ではないものにmargin-leftを指定
夜要素の4個目からmargin-topに幅を指定
このように設定してました。
はい面倒です。
これにレスポンシブで指定する場合とかは3列から2列やら4列やらに対応しないとあかんのです。

まぁそれが一括で間隔を指定できるっていうのがgapです。
イメージとしてはこんな感じ?

中の要素がどんなであろうと、間隔の設定をしたら全部いっしょになるってのがgapってことで書き方をどぞ

// 全部の余白を50pxにしたい場合
.wrapper{
  display: flex;
  gap: 50px;
}

// 行間30px列間20pxにしたい場合
.wrapper{
  diplay: flex;

  // まとめて書く場合
  gap: 30px 20px;

  // 分けて書く場合
  row-gap: 30px;
  column-gap: 20px;
}

簡単!なんて簡単!
ブロックごとの間隔が、同じような場合とかも一気に指定できていいですよね。

<div class="text">
 <p>実はボーのかっか口がいをばかが見ひまたまし。するとしばらくいいかげんたますというポケットないた。まじめますないことだはたそれでは口の愉快たちの所をはそんなに変でしないて、そっちでもねこの座っられんですう。</p>

 <p>ぶっつけ過ぎそれは舌からうるさいたて一番のマッチの譜顔に云い第三赤ん坊館のかっこうを帰らてあげですた。先生は前いろてっまし。顔も一はいりゴーシュのようからなってまわった。</p>

 <p>狸はつけ日だりぼくを出しながらいで。ゴーシュは扉でしばらくとくぐて眼が狸のようにやっとゃくしゃしていましたがいつまでもつづけてへしがよし猫へとりているでし。まるでまるでむのくらいしかないのでが間で飛んなた。</p>

 <p>やつなるべくにぎてしまいはもうじぶんがをしておっかさんからききますたら。ゴーシュをけしたた。「裏が弾いた。ゴーシュ、おまえを天井。ぶっつけ。」</p>

 <p>誰は前のときのいきなり一生けん命のところへ飛ばしました。ゴーシュはねずみからご猫を行くて栗がさきをたってもう一生けん命睡っしたときを出たた。ぼうっと病気叫びて、なるてわらってくださいだながらかっこうがするとマッチへもちろん日上げまします。</p>
</div>


.test{
  display: flex;
  flex-direction: column;
  row-gap: 1.3rem;
}

これで、間があいた読みやすい文章になりますね。
ってことでgapをつかわないなんて、どうかしてるぜ!
ちなみにこのgapはgridでも使えます。
flexをgridにするだけです。

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP