1

実装したいこと

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

現在の状況

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

試したこと

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

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

画像の説明をここに入力

    <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/9Curly 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>

1 件の回答 1

2

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

ul {
  display: flex;
  width: 300px;
  padding: 0;
  border: 5px solid #faa;
  list-style: none;
}

img {
  vertical-align: top;
}
<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>

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

ul {
  display: flex;
  flex-wrap: wrap;  /* 追加 */
  width: 300px;
  padding: 0;
  border: 5px solid #faa;
  list-style: none;
}

img {
  vertical-align: top;
}
<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>

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

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;
}
<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>

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

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

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)
}
<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>

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

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;
}
<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>

2
  • margin-right: calc(100% - 50px * 5)のcalc内はどこのmarginを表しているのでしょうか?
    – k0727
    Commented 2019年12月6日 4:23
  • 今回は grid layoutを用いて実装させていただきました!ありがとうございます!共にまだ存じ上げていないコードでとても勉強になりました!
    – k0727
    Commented 2019年12月6日 4:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。