Flexboxで、１行目左揃え、２行目右揃え、を実現したい

Question

前提・実現したいこと

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

この８つのli要素をFlexプロパティで横並びにした時、

|■ ■ ■ ■|
|■ ■ ■ ■|

こういう４カラムに配置することはできたのですが
理想としてはそれぞれの行に↓の感じで端っこにマージンを入れて、行をズラしたいです。

|■ ■ ■ ■ |
| ■ ■ ■ ■|

もちろんウィンドウサイズで３カラムにもなりますので、理想としてはこういうイメージになります。

|■ ■ ■ |
| ■ ■ ■|
|■ ■ |

色々試してはみているのですがうまくいかずで、flexでは難しいのですかね？そもそもcssで実現可能かがわからずで,,,
アドバイスよろしくお願いいたします。

Comments

[azuapricot]

現時点での再現可能なコードを提示したほうが回答がつきやすいとおもいます

Answer 1

なにかありそうな気もしますが
２段目（というか5番目の要素を）をズラスだけならなんとでもなりますが
右寄せとなると構造が違うので難しそうですね
ul-liやめてグルーピングするとか工夫が必要かもしれません。