【作業効率化】よく使うCSSスニペット(flex box編)
コーディングをしていて、
「この形、前にも作ったなー。でもどうやったっけ」
って場面に遭遇することがあるかと思います。
私も例外ではありません笑
今回は備忘録も兼ねて、
作業効率化のために、よく使うCSSスニペットを紹介します。
良ければ参考にしてみてください。
1flexboxを使った横並び
よく出てくるボックスの横並びです。
昔はfloatを用いてclearfixなどやっていましたが、
今はそんな面倒なことはせずともflexboxで解決です。
使ったことのない方はこれを機に使ってみてください。
1.1シンプルな横並び
<div class="ex-box-container">
<div class="ex-box"><span>box1</span></div>
<div class="ex-box"><span>box2</span></div>
<div class="ex-box"><span>box3</span></div>
<div class="ex-box"><span>box4</span></div>
<div class="ex-box"><span>box5</span></div>
</div>.ex-box-container {
display: flex; /* 指定するのはこれだけ */
}
.ex-box {
width: 100px;
height: 100px;
background-color: #1a5396;
color: #fff;
}
.ex-box + .ex-box { /* 隣接セレクタでボックスに隙間を空ける */
margin-left: 20px;
}横並びにしたいboxの親要素にdisplay: flex;を指定してあげるだけです。
なんと簡単…
そのまま幅を縮めると、ボックスもそれに合わせて縮んでくれます。
画面幅を縮めたときにカラム落ちさせたい場合は、
flex-wrap: wrap;を指定すればOKです。
また、横並びにしたboxに隙間を空けたい場合は、
marginを指定してあげると思いますが、
ちょっとしたテクニックとして、隣接セレクタ+を使うことをおすすめします。
隣接セレクタを使えば、最初のボックス(デモで言うbox1)にmarginを掛けることなく、隙間を空けてくれます。
隣接セレクタは、ヘッダーナビや、グローバルナビの横並びや、
リストなどの縦並びの要素にもよく使うテクニックなので、
覚えておくと便利です。
1.2均等に隙間を空けて横に並べる
均等に隙間を空けてboxが並ぶようにするにはどうすれば良いでしょうか。
これもflexboxを使えば簡単に解決します。
<div class="ex-box-container-02">
<div class="ex-box-02"><span>box1</span></div>
<div class="ex-box-02"><span>box2</span></div>
<div class="ex-box-02"><span>box3</span></div>
</div>.ex-box-container-02 {
display: flex;
justify-content: space-between; /* これを指定 */
}
.ex-box-02 {
width: 100px;
height: 100px;
background-color: #1a5396;
color: #fff;
}親要素にdisplay: flex;をし、
justify-content: space-between;を指定してあげるだけです。
1.32段以上の横並びレイアウト
ECサイトの商品一覧ページや、ブログ記事一覧など、
同じレイアウトのボックスを2段以上表示させたい場合があります。
このパターンはよく出てくるので、型として覚えておけばすぐに使えます。
今回は横3列、縦3段を想定した例になります。
<div class="ex-box-container-03">
<div class="ex-box-03"><span>box1</span></div>
<div class="ex-box-03"><span>box2</span></div>
<div class="ex-box-03"><span>box3</span></div>
<div class="ex-box-03"><span>box4</span></div>
<div class="ex-box-03"><span>box5</span></div>
<div class="ex-box-03"><span>box6</span></div>
<div class="ex-box-03"><span>box7</span></div>
<div class="ex-box-03"><span>box8</span></div>
<div class="ex-box-03"><span>box9</span></div>
</div>.ex-box-container-03 {
display: flex;
flex-wrap: wrap; /* 2段以上にするために指定 */
}
.ex-box-03 {
width: 30%;
height: 100px;
margin-left: calc(10% / 2);
background-color: #1a5396;
color: #fff;
}
.ex-box-03:nth-child(3n+1) { /* 要素を3つごとに区切ったとき、各グループの1番最初に適用する */
margin-left: 0;
}
.ex-box-03:nth-child(n+4) { /* 4番目の以降の要素すべてに適用 */
margin-top: 20px;
}今回、ポイントは3つあります。
flex-wrap
まず、親要素にflex-wrap: wrap;を指定してください。
これで横幅が親要素をはみ出る場合はカラム落ちしてくれるようになります。
calcで余白を入れる
calcを初めて見た方もいるかと思いますが、
簡単に言うと、%とpxを織り交ぜて計算できる便利なプロパティです。
今回、ボックス1つの横幅が30%で3つ並んでいるので、合計90%の領域を取っています。
次に残りの10%を余白に振り分けます。
余白は2つあるので、10%/2 = 5% となります。
余白
余白
「10%/2とか、わざわざcalc使わなくても、そのまま5%って指定すれば良くない？」
って疑問が思い浮かぶと思いますが、
たとえば、10%を3で割るときなど便利です。
そのまま指定する場合、3.3333...%と中途半端な数になってしまいますが、
10%/3と書くと綺麗に書けます。
nth-childで調整
margin-left: calc(10%/2);は、列の1つ目の要素にも掛かってしまいます。
ここで、疑似クラス:nth-childを使って、
左のボックスに掛かっているmargin-leftを0にしてあげます。
左マージン解除
左マージン解除
左マージン解除
:nth-child(3n+1)は、
要素を3つごとに区切ったとき、各グループの1番最初に適用する
という意味になります。
:nth-child(n+4)は、
4番目の要素以降すべてに適用
という意味になります。
言い換えると、1,2,3番目の要素には適用しない
ということです。
こういうレイアウトはよく出てくるので、ぜひスニペット化して使ってください。
