Flexboxのカラムについて、綺麗に改行されません。

Question

前提・実現したいこと

メディアクエエリで画面サイズが小さくなるとflexboxで綺麗に２行３列並びにしたい。

発生している問題
メディアクエエリで画面サイズが小さくなるとflexboxで綺麗に２行３列並びにしたいのですが、
画面サイズが小さくなると２行に改行されるのですが、2個しか改行されず綺麗に２行３列になりません。

該当のソースコード

＜HTML＞

!--メインメニュー-->
<section id="mainbox">
<!--ロゴ-->	
<div class="mainlogo"><img src="img/logo.png" width="200" height="95" alt=""/></div>
<!--ロゴ-->
<!--メニューリスト-->
<div class="main-m-list-menu">
<ul class="main-m-list-ul">
<li class="main-m-list1"><span class="menu-text-main">ホーム</span><br><span class="menu-text-sub">HOME</span></li>
<li class="main-m-list2"><span class="menu-text-main">会社概要</span><br><span class="menu-text-sub">COMPANY</span></li>	
<li class="main-m-list3"><span class="menu-text-main">事業内容</span><br><span class="menu-text-sub">WORKS</span></li>	
<li class="main-m-list4"><span class="menu-text-main">ニュース</span><br><span class="menu-text-sub">NEWS</span></li>	
<li class="main-m-list5"><span class="menu-text-main">採用情報</span><br><span class="menu-text-sub">RECRUIT</span></li>	
<li class="main-m-list6"><span class="menu-text-main">問い合わせ</span><br><span class="menu-text-sub">CONTACT</span></li>
<li class="main-m-list7"></li>	
</ul>
</div>	
<!-- メインメニュー -->
</section>

＜CSS＞

* {
	margin:0;
	padding:0;
}

/* 1180px以上に適用されるCSS（PC用） */
@media screen and (min-width: 1180px)  {
	
	#mainbox {
		width: 100%;
		display: flex;
  		justify-content: center;
	}
	
	.main-m-list-menu {
		width: 100%;
		display: flex;
	}
	
	.mainlogo {
		width:100%;
		margin-left:5%;
	}
	
	ul {
		list-style: none;
	}
	
	li {
		text-align: center;
	}
	
	.main-m-list-menu {
   		display: flex;	
	}
	
	.main-m-list-ul {
		display: flex;
	}
	
	.main-m-list-menu li {
		width: 150px;
		margin-top:1%;
		margin-bottom:1%;
		padding:1%;
		justify-content: center;
 		align-items: center;
	}
	
	.main-m-list2,.main-m-list3,.main-m-list4,.main-m-list5,.main-m-list6 {
		border-left: 1px solid #9fa0a0;
	}
	
	.menu-text-main {
		font-weight: bold;
	}
	
	.menu-text-sub {
		color: #9fa0a0;
		font-size: 80%;
	}
}

/* 768px以上に適用されるCSS（タブレット用） */
@media screen and (min-width: 768px) and ( max-width:1179px) {
	
	#mainbox {
		width: 100%;
		display: flex;
  		justify-content: center;
  		flex-wrap: wrap;
	}
	
	.mainlogo {
		width:100%;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　margin-left:5%;
	}
	
	.main-m-list-menu {
		margin:0;
		width:100%;
	}
	
	ul {
		list-style: none;
	}
	
	li {
		text-align: center;
	}
	
	.main-m-list-menu {
   		display: flex;
  		justify-content: center;
  		flex-wrap: wrap;	
	}
	
	.main-m-list-ul {
  		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.main-m-list-menu li {
		width: 150px;
		margin-top:1%;
		margin-bottom:1%;
		padding:1%;
 		align-items: center;
		justify-content:space-between;
	}
	
	.main-m-list2,.main-m-list3,.main-m-list4,.main-m-list5,.main-m-list6 {
		border-left: 1px solid #9fa0a0;
	}
	
	.menu-text-main {
		font-weight: bold;
	}
	
	.menu-text-sub {
		color: #9fa0a0;
		font-size: 80%;
	}
	
}
/* 428px以上に適用されるCSS（スマホ用） */
@media screen and (min-width: 428px) and ( max-width:767px){
	
	}

試したこと

下記を追加しました。

.main-m-list-menu {
   		display: flex;
  		justify-content: center;
  		flex-wrap: wrap;	
	}
	
	.main-m-list-ul {
  		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.main-m-list-menu li {
		width: 150px;
		margin-top:1%;
		margin-bottom:1%;
		padding:1%;
 		align-items: center;
		justify-content:space-between;
	}

または、リストの部分を

.main-m-list-ul {
  display: flex;
  margin-left: -10px;
}
.main-m-list-menu li {
  box-sizing: border-box;
  flex: 0 1 calc(100% / 3);
  padding: 10px;
  margin-left: 10px;
}

こちらに変更しましたが、改行されずそのまま１列のままでした。

Answer 1

3列にしたいのなら、アイテムの幅を親の幅の1/3になるようにすればいいでしょう。

  .main-m-list-menu li {
    width: 33%;  /* 修正 */
    margin-top:1%;
    margin-bottom:1%;
    padding:1%;
    align-items: center;
    justify-content:space-between;
    box-sizing: border-box; /* 追加 */
  }

Comments

[退会済みユーザー]

ありがとうございます。うまくいきました。親の幅を均等にすればいいのですね！

[退会済みユーザー]

すいません。画面サイズを変えるといっきに２行３列になったんですが、これを画面を小さくするにつれて1個ずつ２行目に行くようにする場合はどしたらいいでしょうか？
こちらも鋭意調査中です。

[hatena19]

.main-m-list-menu li の幅を 180pxぐらいにしたらどうでしょう。

あとは、Gridレイアウトを検討されるとより希望にちかいものになるかも。

[退会済みユーザー]

ありがとうございますやってみます。

[退会済みユーザー]

180pxにしてやってみたところ、実際の画面のスクショの画像がこのコメントに貼り付けられればいいのですが、画面サイズを小さくすると２行にはなるのですが、４列になって、２行目の右端と左端にリストが1個ずつ表示されてしまいます。
もっと画面サイズを小さくすると２行３列になります。

[hatena19]

180pxは一例ですので、適宜調整してご希望に近くなるように調整してください。
メディアクエリのブレークポイントとも関連しますので、その辺の調整も必要です。

Gridレイアウトも検討するといいかも。

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る – WPJ
https://www.webprofessional.jp/difference-between-auto-fill-and-auto-fit/