要件を満たす最低限の内容

要件を満たす最低限の内容

CSS

.リストに設定したクラス名 a{

  height: 100%;

  width: 100%;

}

最終的な内容

HTML

<ul>

  <li class="pop-menu-list"><a href="/" class="pop-menu-list-a"><i class="fas fa-home"></i>ホーム</a></li>

  <li class="pop-menu-list"><a href="/category-list" class="pop-menu-list-a"><i class="fas fa-cloud"></i>カテゴリー</a></li>

CSS

.pop-menu-list-a{

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction:column;

}

・Flexboxを使って孫要素まで高さを揃える方法
・Flexbox playground