CSSで要素を縦に並べ、改行したい

Question

CSSで、以下のようなボックスの並びを実装したいと考えています。

[1] [6]
[2] [7]
[3] [8]
[4] [9]
[5] [10]

・列数は2列を予定しています。
・要素はul/liを考えていますが、それ以外でも問題ございません。

できればjsを使わず、要素の増減にも柔軟に対応できるよう実装したいと考えているのですが、
たとえばcss gridではなくflexboxで、改行を含めた実装は可能でしょうか？

気付ければきっと簡単な話だと思うのですが、行き詰まってしまいました。。
お知恵をお借りできれば幸いです。

Answer 1

flex-direction: column で垂直方向に流れるフレックスコンテナが作れます。
flex-direction - CSS: カスケーディングスタイルシート | MDN

ただ、2列という指定であれば、グリッドや段組みの方が適しているようにも思えます。
段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN

Comments

[spangl]

文章が足りておらず申し訳ありませんでした。垂直方向には流せるのですが、その後の改行に悩んでいます。
要素数の半分程度で2列に改行できるようにしたいのですが、
その際はコンテナの高さを指定しておくことで対応する、という認識で合っていますでしょうか？

[Lhankor_Mhy]

はい、おっしゃるとおりです。

[spangl]

ありがとうございます。大変参考になりました。