【HTML・CSS】スマホ表示時に要素を折り返し、幅を可変にしたいです。

前提・実現したいこと

閲覧ありがとうございます。

５つの要素があり、PC表示では５つとも横並びに表示。
スマホでは２列に表示し、且つ幅を可変で表示したいです。

発生している問題・エラーメッセージ

現在のコードではスマホ表示時に、ウィンドウ幅を小さくすると
２列目の要素が折り返してしまいます。
これを折り返さずにウィンドウ幅に応じて縮小したいです。

【↓PC表示時】

【↓スマホ表示時】

【↓上記からウィンドウ幅をさらに小さくすると２列目が折り返してしまう。このときに折り返さずに縮小したい】

該当のソースコード

HTML
1
2<ul>
3  <li><img src="https://placehold.jp/150x150.png" alt=""></li>
4  <li><img src="https://placehold.jp/150x150.png" alt=""></li>
5  <li><img src="https://placehold.jp/150x150.png" alt=""></li>
6  <li><img src="https://placehold.jp/150x150.png" alt=""></li>
7  <li><img src="https://placehold.jp/150x150.png" alt=""></li>
8</ul>

css
1ul {
2  display: flex;
3  list-style: none;
4}
5
6ul li {
7  max-width: 200px;
8  min-height: 200px;
9  padding: 10px;
10  margin-bottom: 10px;
11  background: rgb(63, 118, 255);
12  border: 1px solid rgb(0, 0, 0);
13}
14
15ul li+li {
16  margin-left: 10px;
17}
18
19ul li img {
20  width: 100%;
21}
22
23//以下からスマホ表示
24@media screen and (max-width: 767px) {
25  ul {
26    flex-wrap: wrap;
27    max-width: 449px;
28  }
29
30  ul li {
31    width: 100%;
32  }
33
34  ul li+li {
35    margin-left: 0;
36  }
37
38  ul li:nth-child(2n) {
39    margin-left: 5px;
40  }
41}

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1@media screen and (max-width: 767px) {
2  ul li {
3    /* width: 100%; */
4    flex-grow: 1;
5    flex-shrink: 1;
6    flex-basis: calc(50% - 5px); /* うまくいかないばあい「5px」の数字を大きくしていってください */
7  }
8}

もしくは、display: grid;をつかってもいいかもしれません。

CSS
1@media screen and (max-width: 767px) {
2  ul {
3    display: grid;
4    grid-template-columns: 1fr 1fr;
5    grid-gap: 5px;
6    gap: 5px;
7
8    max-width: 449px;
9  }
10  
11  ul li+li {
12    margin-left: 0;
13  }
14}