52735


サイズの揃わない画像を下の数字のような並びにしたいです。  
指定された１行にある数が３個・４個・２個と決まっていないので、うまく並べられません。

１ ２ ３  
４ ５ ６ ７  
８ ９

flexのspace-
aroundできれいに並ぶかと思ったのですが、レスポンシブ指定のため拡縮で１行にある数が変化してしまいます。(拡縮で画像間の余白が変化するデザインです)  
li要素のため、１行ずつをspan等で囲んだり、brで改行するわけにもいかず１行に収まる画像の数を指定できないのですが、どうするべきでしょうか。  
適切な方法をご教授ください。

[code]

    <ul class="list-img">
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
    </ul>
    
    
    .list-img{
        align-items: center;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .img{
            display: inline-block;
        }
    }
    
[/code]


CC BY-SA 4.0
2019-02-12T10:56:07.250
52728
2019-02-12T14:07:15.957
32148
question
css
CSS サイズの揃わないli要素を複数行/不等分で並べる


bootstrapを使っていいのでした。

[code]

    <li class="img col-sm-4"></li>
    <li class="img col-sm-4"></li>
    <li class="img col-sm-4"></li>
    <li class="img col-sm-3"></li>
    <li class="img col-sm-3"></li>
    <li class="img col-sm-3"></li>
    <li class="img col-sm-3"></li>
    <li class="img col-sm-6"></li>
    <li class="img col-sm-6"></li>
    
[/code]


CC BY-SA 4.0
2019-02-12T13:32:05.163
52734
2019-02-12T13:32:05.163
30796
52728
answer


例えばリストを入れ子にするのはどうでしょう？  
合計した横幅がウインドウをはみ出した場合とか、各段の間の空白の考慮とかを入れていませんが、以下のような感じで。  
li の中の数字はダミーで入れています。

[code]

    <ul class="list-row">
      <li>
        <ul class="list-column">
          <li class="img">１</li>
          <li class="img">２</li>
          <li class="img">３</li>
        </ul>
      </li>
      <li>
        <ul class="list-column">
          <li class="img">４</li>
          <li class="img">５</li>
          <li class="img">６</li>
          <li class="img">７</li>
        </ul>
      </li>
      <li>
        <ul class="list-column">
          <li class="img">８</li>
          <li class="img">９</li>
        </ul>
      </li>
    </ul>
    
    .list-row{
        list-style: none;
        padding: 0;
    }
    .list-column{
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        list-style: none;
        padding: 0;
        .img{
            display: inline-block;
        }
    }
    
[/code]


CC BY-SA 4.0
2019-02-12T14:01:59.343
52735
2019-02-12T14:07:15.957
2019-02-12T14:07:15.957
26370
26370
52728
answer