CSSの横並びについて 実現の可否

Question

CSSによる要素の横並びについて実現可能か否か教えてください。

仮でulのliを使用して説明しています。

<ul>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
</ul>

2カラムのリストを実現する場合、floatなりflexboxなどを使用して、
基本的には以下のような並び方になると思います。

・リスト01 ・リスト02
・リスト03 ・リスト04
・リスト05 ・リスト06

これを以下のような並びにする方法がCSSで可能でしょうか？

・リスト01 ・リスト04
・リスト02 ・リスト05
・リスト03 ・リスト06

左の列から順番に03まで縦並びにして、上限いっぱいで04以降は右隣に移動し縦並びにしていく。

以下のようにul分けるという方法ではなく一つのulで完結させたいです。

<ul>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ul>

<ul>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
</ul>

よろしくお願いいたします。

Answer 1

ul要素に

display: flex;
flex-direction: column;

を適用してみてください。
ul要素とli要素の高さを調節することで折り返し位置も調整できます。

flexboxコンテナ: flex-direction

Comments

[退会済みユーザー]

目からうろこです。
ありがとうございました。

Answer 2

orderプロパティを使えば実現できるのではないでしょうか。
Flex アイテムの順序を設定する