【CSS】flexboxの要素を任意の位置で改行する方法

【CSS】flexboxの要素を任意の位置で改行する方法 | でざなり (dezanari.com)

flexboxの中の要素はflex-wrap: wrap;で改行できますが、これって要素がいっぱいあってこれ以上入らない場合に改行するプロパティなんですよね。

ただ、今回はflexbox内にまだスペースはあるけど特定の位置で改行したいということがあったので、これのやり方を解説します。

通常のflexboxでの改行

通常ならdisplay: flex;とflex-wrap: wrap;を同時に指定すれば、これ以上横幅がない場合に勝手に改行してくれます。

こんな感じでflexbox内に5番目の要素が入るほどのスペースはないので自動で改行されます。

しかし、今回やりたいのは2番目や3番目など、まだflexbox内にスペースはあるけど特定の狙った位置で改行するというものです。

flexbox内の要素を狙った位置で改行するのはこんな感じにやります。

改行したい位置に空のブロック要素を入れてwidth: 100%;を指定します。

残ったスペースはこの空の要素が占有するので、次の要素が改行されるわけですね。

flexboxはかなり便利なので使う機会が多いと思います。

ちょっと工夫すればこういう微妙な部分にも手が届くので、知っておくと地味に便利だったりしますね。