flexboxでnth-childを使って特定番目だけカラム数を変える指定 - tanabota（タナボタ）

flexboxを使っていて、例えば8個の項目を並べたいとします。

1行目に4つ、2行目に4つ並べる、なんていうときには普通にflexboxの指定をすればOKです。

でも、ときには1行目に2つ並び、2行目以降はずっと3つで並んでいく、なんていう変則的な並べ方をしたいときもありますよね。

そんなときのCSSの指定方法をメモしておきます。

ちなみに、この記事を最後まで読むとこんなのが再現可能になります。デカくてすいません。

サンプルです。

始めから2つだけ変えたいとき

flexboxをかけた親ボックスの中の、子要素にnth-childを指定すればいいんだろうというのはすぐに思いつきますよね。

で、おそらく一番始めに頭に思い浮かぶのが下記。


子要素:nth-child(1),
子要素:nth-child(2) {
 ここに子要素のスタイルを記述
}

決して間違っていないし、きちんと望んだ結果になってくれるんですが、なんだろうこれ。なんか負けた感がすごい（笑）

もっとスマートに書きたい、そんなときは下記をお試しあれ。


子要素:nth-child(-n+2) {
 ここに子要素のスタイルを記述
}

書いてしまえば何だそんなことかっていう記述ですが、僕はとっさには出てきませんでしたｗ

おまけ：さらに途中の何番目から何番目だけ指定する方法

始めの2つは2カラムにしたい、その後は3カラムなんだけれど、例えば9番目と10番目はもう一度2カラムにしたい。

そんなときはこう書いてあげます。


子要素:nth-child(-n+2),
子要素:nth-child(n+9):not(:nth-child(n+11)) {
 ここに子要素のスタイルを記述
}

だんだん頭がこんがらがってきますねｗ

(n+9)で9番目以降を指定して、:not()の中にnth-child(n+11)を指定して、11番目以降を除外。

つまり9番目から10番目だけを指定することになります。

もういっそ原点回帰して、


子要素:nth-child(1),
子要素:nth-child(2),
子要素:nth-child(9),
子要素:nth-child(10) {
 ここに子要素のスタイルを記述
}

の方が分かりやすくて良いコードな気すらしてきましたｗ

検証用に使ったそれっぽいソースと出力時の画像のスクリーンショットも一応掲載しておきます。

必要に応じていじってみてください（そしてもっとイケてる指定があれば教えてやってください）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>

<style type="text/css">

/*===== CSSここから =====*/

/* 2列 3列のとき */
.flexbox_2and3 {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 width: 640px;
}
.flexbox_2and3 .item  {
width: 200px;
margin-bottom: 1rem;
}

.flexbox_2and3 .item img {
background-color: #666;
width: 200px;
height: 200px;
display: block;
}
/* 始めの2つと、9～10番目を2列にする */
.flexbox_2and3 .item:nth-child(-n+2),
.flexbox_2and3 .item:nth-child(n+9):not(:nth-child(n+11)) {
width: 310px;
}
.flexbox_2and3 .item:nth-child(-n+2) img,
.flexbox_2and3 .item:nth-child(n+9):not(:nth-child(n+11)) img {
background-color: #666;
width: 310px;
height: 310px;
}

</style>
</head>

<body>

<!--===== HTMLここから =====-->

<div class="flexbox_2and3">
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
<div class="item"><img src="">これはキャプションです。</div>
</div>
</body>
</html>

出力結果はこちら