61161


## 実装したいこと

  1. リストを５個刻みで改行したい。
  2. 今は画像の借り入れだが、本来はeachforでデータを取得し必要分をリストに入れたい。

## 現在の状況

  1. １０個のliタグがある。
  2. それぞれはラジオボタンにlabelされている。
  3. liタグはflexboxにより横並びしている。

## 試したこと

  1. 5個刻みでulタグを生成していたが、foreachでデータベースにある分だけ、  
リストを作る際に、自動で改行を入れれるようにしたいため一旦ボツとした。

php.laravel初学者になります。  
至らない点等ございましたら、コメントで指摘していただけると幸いです。  
よろしくお願いいたします。

[![画像の説明をここに入力](https://i.stack.imgur.com/59y0q.jpg)](https://i.stack.imgur.com/59y0q.jpg)

[code]

        <div class='select_seed'>
          <div class='seed_header'> 
            <img src="{{ asset('/assets/images/size-large.png') }}" alt='size-icon' class=size_icon ><h1>犬を選ぶ</h1>
          </div>
          <ul>
            <li>
              <div class="pad">
                <input id="test46" name="seed" type="radio" class="selectbox " value="46" checked="" required="">
                <label class="selectlabel coolrdio" for="test46"><img class='photo' src="{{ asset('/assets/images/1irish-wolfhound-.jpg') }}" alt='アイリッシュウルフハウンド'>アイリッシュウルフハウンド</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test47" name="seed" type="radio" class="selectbox" value="47" required="">
                <label class="selectlabel coolrdio" for="test47"><img class='photo' src="{{ asset('/assets/images/2irish-setter.jpg') }}" alt='アイリッシュセッター'>アイリッシュセッター</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test48" name="seed" type="radio" class="selectbox" value="48" required="">
                <label class="selectlabel coolrdio" for="test48"><img class='photo' src="{{ asset('/assets/images/4Afghan hound.jpg') }}" alt='アフガンハウンド'>アフガンハウンド</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test49" name="seed" type="radio" class="selectbox"  value="49" required="">
                <label class="selectlabel coolrdio" for="test49"><img class='photo' src="{{ asset('/assets/images/5alaskan-malamute.jpg') }}" alt='アラスカンマラミュート'>アラスカンマラミュート</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test50" name="seed" type="radio" class="selectbox " value="50" required="">
                <label class="selectlabel coolrdio" for="test50"><img class='photo' src="{{ asset('/assets/images/7pointer.jpg') }}" alt='イングリッシュポインター'>イングリッシュポインター</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test51" name="seed" type="radio" class="selectbox " value="51" required="">
                <label class="selectlabel coolrdio" for="test51"><img class='photo' src="{{ asset('/assets/images/8old-sheepdog.jpg') }}" alt='オールドイングリッシュシープドッグ'>オールドイングリッシュシープドッグ</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test52" name="seed" type="radio" class="selectbox " value="52" required="">
                <label class="selectlabel coolrdio" for="test52"><img class='photo' src="{{ asset('/assets/images/９Curly retriever.jpg') }}" alt='カーリーコーテッドレトリバー<'>カーリーコーテッドレトリバー</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test53" name="seed" type="radio" class="selectbox " value="53" required="">
                <label class="selectlabel coolrdio" for="test53"><img class='photo' src="{{ asset('/assets/images/10great-dane.jpg') }}" alt='グレーデン'>グレーデン</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test54" name="seed" type="radio" class="selectbox " value="54" required="">
                <label class="selectlabel coolrdio" for="test54"><img class='photo' src="{{ asset('/assets/images/11great-p.jpg') }}" alt='グレートピレニーズ'>グレートピレニーズ</label>
              </div>
            </li>
            <li>
              <div class="pad">
                <input id="test55" name="seed" type="radio" class="selectbox " value="55" required="">
                <label class="selectlabel coolrdio" for="test55"><img class='photo' src="{{ asset('/assets/images/13gorlden.jpg') }}" alt='ゴールデンレトリバー<'>ゴールデンレトリバー</label>
              </div>
            </li>
          </ul>
        </div>
    
[/code]


CC BY-SA 4.0
2019-12-06T01:46:28.633
61158
2019-12-06T04:24:12.450
2020-06-17T08:14:45.997
-1
36914
question
php html css laravel
flexbox で整列しているリストを5個刻みで改行したい


`flex-wrap` プロパティの初期値は `nowrap` であり、この状態では flex アイテムは単一行に配置され、行内に収まらない場合には
flex コンテナからはみ出すこともあります[[1]](https://drafts.csswg.org/css-flexbox-1/#flex-wrap-
property), [[2]](https://drafts.csswg.org/css-flexbox-1/#single-line-flex-
container)。恐らく、質問者さんが直面されている状況は前述のケースに合致します。

[code]

    ul {
      display: flex;
      width: 300px;
      padding: 0;
      border: 5px solid #faa;
      list-style: none;
    }
    
    img {
      vertical-align: top;
    }
[/code]

[code]

    <ul>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
    </ul>
[/code]

そこで、まずは `flex-wrap` プロパティに対して `wrap` を設定し、 flex アイテムの折り返しを許可します。これにより、 flex
コンテナに収まらない flex アイテムは複数行に分割されます。

[code]

    ul {
      display: flex;
      flex-wrap: wrap;  /* 追加 */
      width: 300px;
      padding: 0;
      border: 5px solid #faa;
      list-style: none;
    }
    
    img {
      vertical-align: top;
    }
[/code]

[code]

    <ul>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
    </ul>
[/code]

`li` 要素のうち 5 の倍数にあたる要素だけを選択する必要がありますが、これには `:nth-of-type` もしくは `:nth-child`
擬似クラスを用いることが出来ます。また、 flex アイテムを強制的に改行させるためには `break-before`, `break-after`
プロパティが使用出来ます。

[code]

    ul {
      display: flex;
      flex-wrap: wrap;  /* 追加 */
      width: 300px;
      padding: 0;
      border: 5px solid #faa;
      list-style: none;
    }
    
    img {
      vertical-align: top;
    }
    
    li:nth-child(5n) {
      page-break-after: always;
      break-after: always;
    }
[/code]

[code]

    <ul>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
    </ul>
[/code]

しかし、一部のブラウザは上記のプロパティに対応していないため、他の方法を採用する必要があります。改行させたい箇所に改行用の要素を置くというのも方法としてありますが、今回の場合、
`ul` 要素の直下に新たに `li` 要素を増やしてしまうことになるため、好ましくないと考えられます。そのため、現状は以下の二つの方法が妥当かと思います。

  1. 一行に含まれる flex アイテムが 5 個になるように flex アイテムへ幅や余白を適用する。

[code]

    ul {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      padding: 0;
      border: 5px solid #faa;
      list-style: none;
    }
    
    img {
      vertical-align: top;
    }
    
    li:nth-child(5n) {
      margin-right: calc(100% - 50px * 5)
    }
[/code]

[code]

    <ul>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
    </ul>
[/code]

  2. どうしても flexbox を使わなければならないわけではない場合、 grid layout を用いる。

[code]

    ul {
      display: grid;
      grid-template-columns: repeat(5, min-content);
      width: 300px;
      padding: 0;
      border: 5px solid #faa;
      list-style: none;
    }
    
    img {
      vertical-align: top;
    }
[/code]

[code]

    <ul>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
      <li><img src="http://placehold.jp/3d4070/ffffff/50x50.png" alt></li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-06T03:30:34.757
61161
2019-12-06T03:30:34.757
32986
61158
answer