liタグを横並びにしたい

Question

liタグを以下のように横並びにしたいのですが、
CSSのフレックスを使うとどのように書けばよいでしょうか。
（そもそも、こういう場合はフレックスを使ったほうがよいですか？）

①

[1つ目のli]

[2][3][4]

・一つ目のliは横いっぱい、２〜４つ目のliは等間隔で横並びです。

②

[1つ目のli][2][3][4]

・一つ目のliタグは少し幅広め、２〜４つ目のliは１つ目のliより幅狭いですが、等間隔。

Answer 1

こんな感じですか。
https://jsfiddle.net/tv3Lv8Lc/

<ul id="list_1">
<li>1つ目のli</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="list_2">
<li>1つ目のli</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

ul{
  display:flex;
  flex-flow:row wrap;
}
li{
  flex:1 0;
}
#list_1 li:first-child{
  flex:1 0 100%;
}
#list_2 li:first-child{
  flex:3 0;
}

ポイントは、親要素にflex-flow:row wrap;をつけることと、子要素にflex:1 0;をつけることです。そうすると、横幅いっぱいに伸びます。サイズの差をつけたい場合はflexの1番目と3番目の値を変えればいいです。

たとえば、①は最初の子要素の3番目に100%を設定しましたので、横幅いっぱいに伸び、残りの要素は折り返して3つで横幅いっぱいになります。
②の場合は最初の子要素の1番目に3を設定しましたので、3:1:1:1の比率で横幅いっぱいに伸びます。

Comments

[退会済みユーザー]

回答いただき、ありがとうございました。
教えていただいたサイトのような仕組みもあるのですね、とても参考になりました。