メニューの並びをレスポンシブで変えたい

前提

HTMLとCSSのみでHPを作成しています。
初歩的なことですが何度やってもうまくいかず、ご教示いただけますと嬉しいです。

実現したいこと

HPのメニューを横一列から縦２列横４行になるようにレスポンシブ対応させたい。

PCだと以下並び
メニュー１　メニュー２　メニュー３　メニュー４　メニュー５　メニュー６　メニュー７　メニュー８

スマホになったときに以下のように並べたい
メニュー１　メニュー２
メニュー３　メニュー４
メニュー５　メニュー６
メニュー７　メニュー８

<nav>
  <ul>
    <li><a href="＃">メニュー1</a></li>
    <li><a href="＃">メニュー２</a></li>
    <li><a href="＃">メニュー３</a></li>
    <li><a href="＃">メニュー４</a></li>
    <li><a href="＃">メニュー５</a></li>
  　<li><a href="＃">メニュー６</a></li>
    <li><a href="＃">メニュー７</a></li>
   <li><a href="＃">メニュー８</a></li>
  </ul>
</nav>

PC時のCSS
header nav li {
padding-left: 30px;
padding-right: 30px;
display: inline;
}

試したこと

flex-wrap: wrap; で折り返すCSSを見かけたのですが
リストタグを使用しているからなのかうまく反映できませんでした

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

flexboxを利用するのはいかがでしょうか？

動作確認用サンプル：https://jsfiddle.net/6dbvho0w/1/

html
1<header class="header">
2  <nav class="nav-container">
3    <ul class="nav">
4      <li class="nav__item"><a href="＃">メニュー1</a></li>
5      <li class="nav__item"><a href="＃">メニュー２</a></li>
6      <li class="nav__item"><a href="＃">メニュー３</a></li>
7      <li class="nav__item"><a href="＃">メニュー４</a></li>
8      <li class="nav__item"><a href="＃">メニュー５</a></li>
9      <li class="nav__item"><a href="＃">メニュー６</a></li>
10      <li class="nav__item"><a href="＃">メニュー７</a></li>
11      <li class="nav__item"><a href="＃">メニュー８</a></li>
12    </ul>
13  </nav>
14</header>

css
1/*==================================================
2
3** Reset CSS
4==================================================*/
5*,
6*::before,
7*::after {
8  margin: 0;
9  padding: 0;
10  box-sizing: border-box;
11}
12
13li {
14  list-style: none;
15}
16
17/*==================================================
18
19** Header
20==================================================*/
21/* スマホの時の見た目 */
22.nav {
23  /* ulをflexにする */
24  display: flex;
25  /* 子要素の折り返しをする */
26  flex-wrap: wrap;
27}
28
29.nav__item {
30  /* 1つのliの横幅は、親要素の半分（横2つに並べるため） */
31  width: 50%;
32  padding: 0.5em 1em;
33  text-align: center;
34}
35
36/* PCのときの見た目 */
37/* 画面の横幅何px以上の時、PCの見た目にするのかは、お好みで。 */
38@media screen and (min-width: 720px) {
39   .nav {
40     /* PCの時は折り返ししない */
41     flex-wrap: nowrap;
42   }
43}

投稿2022/11/30 14:48

Cocode

総合スコア2314

macha_monaka

2022/12/01 13:00

丁寧にサンプルまで提案していただきありがとうございます！コメント入れていただいたのがとてもわかりやすかったです。おかげさまで無事解決できました(o^^o)

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

ベストアンサー

Flexboxレイアウトを使うのが一般的です。

ブレークポイントとか不明なので適当にコード例を書いてみました。

css
1header nav ul {
2  display: flex;
3  list-style: none;
4  padding-left: 0;
5  justify-content: space-between;
6  flex-wrap: wrap;
7}
8header nav ul li {
9  text-align: center;
10  width: 50%;
11}
12@media screen and (min-width: 900px) {
13  header nav ul {
14    flex-wrap: nowrap;
15  }
16}

詳細は下記などで学習してください。

Flexbox の基本的な使い方

最近はGridレイアウトもよく使われますね。

css
1header nav ul {
2  list-style: none;
3  padding-left: 0;
4  display: grid;
5  grid-template-columns: repeat(2, 1fr);
6}
7header nav ul li {
8  text-align: center;
9}
10@media screen and (min-width: 900px) {
11  header nav ul {
12    grid-template-columns: repeat(8, 1fr);
13  }
14}