【CSS】上から下へ要素を「N」字の順番に表示する方法を解説します。

なやむくん

左から右へ並べる方法は分かるけど、上から下へ、そして右上から下へのように要素を表示させたい。

などの疑問や悩みを解決してまいります。

display: flexで横並びにして左から右へ要素を表示、折り返し左下から右へのようにすることは多いかと思います。

しかし、上から下へ要素を表示して折り返し右上から下へ表示させるという方法はあまり見ないかと思います。

みつた

左から右へ、そして左下から右への表示の流れを「Z」字としたら、今回のは「N」字の流れで表示するようなイメージです！

今回は要素を上から下へ、折り返し右上から下へと「N」字の順番で表示させる方法を解説していきます。

完成例

まずは完成例を見てみましょう。

See the Pen Untitled by koutarou mori (@koutarou-mori) on CodePen.

完成例を見ていただきますと、上から下へ、そして折り返したときには右上から下へ「N」字の流れで表示されているのが分かりますね。

以下のように長いテキストを指定した列に分けることもできます。

See the Pen column-countブログ記事2 by koutarou mori (@koutarou-mori) on CodePen.

みつた

こちら簡単に表示することができます！

指定方法

それでは指定方法について解説していきます。

今回キーとなるのが以下のプロパティです。

// 段数を指定
column-count

// 段と段の間の余白を指定
column-gap

みつた

それぞれ解説していきます！

column-count

column-countは段数を指定するプロパティになります。

CodePenの完成例をもう1度確認していただくと、リストタグで表示している方はcolumn-count: 3;で、テキスト表示している方はcolumn-count: 2;を指定しています。

指定された数値の段数になっていることが確認できると思います。

このようにcolumn-countは段数を指定することができます。

column-gap

column-gapは、段と段の間の余白を指定することができます。

こちらを指定していないと段同士が密着している状態になり、非常に見づらいのでこちらは必須のプロパティとなっています。

まとめ

ここまで読んでいただきありがとうございました。本記事のまとめです。

column-countとcolumn-gapをセットで使用することで、今回説明したようなことができますので是非お試しください。