flex-growが適用されない

Question

前提・実現したいこと

display: flexで指定した子要素のflex-growが適用されない
画像の記事一覧の幅までメニューを均等に大きくしたいのですがなりません。

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

エラーメッセージ

該当のソースコード

HTML

<div class="main-wrap">
          <div class="menu-wrap">
            <div class="menu">
              <ul>
                <a href="#"><li>メニュー1</li></a>
                <a href="#"><li>メニュー2</li></a>
                <a href="#"><li>メニュー3</li></a>
              </ul>
            </div>
          </div>

CSS

.menu-wrap{
	width: 628px;
  margin-top: 30px;
}

.menu ul{
	display: flex;
}

.menu li{
	flex-grow: 1;
	width: 100%;
  color: #BFBDBD;
  text-align: center;
  vertical-align: middle;
  height: 46px;
  background-color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 46px;
}

.menu li:hover{
border-bottom: solid 3px salmon;
color: salmon;
transition: 0.3s;
}

試したこと

ここに問題に対して試したことを記載してください。

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

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

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

flex-growが効かないのは、flex-growを指定した.menu liが、display:flexを指定している.menu ulの子要素ではなく、孫要素になっているからです。

.menu ul{
  display: flex;
}
.menu li{
  flex-grow: 1;
  ...あとは省略
}

<ul>
  <a href="#"><li>メニュー1</li></a>
  <a href="#"><li>メニュー2</li></a>
  <a href="#"><li>メニュー3</li></a>
</ul>

HTMLを見てください。<ul>の中に<a>があり、その中に<li>があります。

問題を解決するためには、HTMLを修正しましょう。<ul>の中に<li>があり、その中に<a>が入る形にします。

<ul>
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

flex-growはdisplay:flexを指定した要素の子要素に指定します。
<ul>は「リスト」、<li>は「リストの要素」ですので、意味としても、こちらの方が正しくなります。

Comments

[kotetsu12]

ありがとうございました。
孫になっているとは盲点でした。
分かりやすい説明でとても助かりました！