Flexbody使用時に子要素の高さを広げたい

前提・実現したいこと

webサイトにてmenu画面の部分を作成しております。
Flexbodyを利用中に縦の高さに関する制御ができなくなっております。
本日縦の配置に関してはこちらにて教えていただき制御することができました。
現状の状態だと画像のような状態になってしまいます。

今後としてはマウスオンにてアニメーションなどを付けたいと考えています。
そのため縦の高さがulと同様の高さがほしいところです。
（ざっくり言うとアウトラインの青の線のところまで広がってほしい）

該当のソースコード

```HTML
<menu>
    <ul>
        <li>おにぎり</li>
        <li>お茶</li>
        <li>おやつ</li>
        <li>バナナ</li>
        <li>敷物</li>
    </ul>
</menu>

css
1menu{
2    height: 62px;
3}
4menu ul{
5    display: flex;
6    height: 62px;
7    align-items: center;
8    outline: 1px solid blue;
9
10}
11menu ul li{
12    text-align: center;
13    flex:auto;
14    outline: 1px solid red;
15    list-style-type: none;
16}

問題に対して試したこと

①単純に縦の高さが不足していると考えheightを指定し、ulと同様の高さ62pxをmenu ul liに指定してみました。
するとFlexboxを使用しているために使用している『align-items: center;』が崩れてしまいました。

②liがインラインだから高さ指定できるわけないじゃん、と考えmenu ul liをdiplay:block;にして高さを62pxにしてみましたがダメでした。
同様にインラインブロックにもしてみましたが同様にダメでした。

③ググてそれっぽい効果がありそうな行動『flex: 1 0 auto;』っを足してみるとか子要素であるmenu ul liに『display: flex;』をたすとかかいくつか試してみたんですがどれもレイアウト崩れを誘発するだけでした。
（ググってなぜそれらを書く必要があったのかはわかっていません。うまくいけば後からさらにそれをググる予定でした）

ちなみにインラインブロックmenu ul liに対してインラインブロックを指定し、heigh:62px;でul同様の高さを与えたときは高さは広がってはいます。（:hoverで色を指定し実験してみました）が文字のレイアウトが狂い左上（ﾃﾞﾌｫ的な位置？）に戻ってしまいます。
そこでFlexbodyを使用している状態ながらもインラインブロックにしているからtext-alignとvertical-alignが効くのかもとも考えましたがだめでした

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

回答1件

ベストアンサー

こんにちは。

いかのようにしてみてはいかがですか？

サンプル

css
1menu ul {
2	display: flex;
3	height: 62px;
4	/* align-items: center; 削除 */
5	outline: 1px solid blue;
6}
7menu ul li {
8	/* text-align: center; */
9	flex: auto;
10	outline: 1px solid red;
11	list-style-type: none;
12	display: flex;
13	align-items: center;
14	justify-content: center;
15}

投稿2020/09/07 05:37

編集2020/09/07 06:14

Lhankor_Mhy

総合スコア36087

eio

2020/09/07 05:53

menu ul li に対して、text-align:center;を削除、display: flex;、align-items: center;、justify-content: center;を足してみましたが質問していた状態？『li』はあくまでもインラインなので文字の高さに依存している状態のままでした。