flexbox の align-items: center; で垂直中央揃えをしたい

Question

前提・実現したいこと

htmlとcssを勉強中です。
flexbox　の　align-items: center;　をうまく機能させることができません。
ご指摘いただきたくお願いいたしますm(..)m

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

ヘッダーの中のリスト<li>を横並びにして、垂直方向中央揃えにしたいのですが、
親要素の<ul>に加え、さらに親要素の<header>にも display: flex; を入力
しないと垂直方向中央揃えになりません。

該当のソースコード

<header>
  <ul>
    <li>あ</li>
    <li>い</li>
    <li>う</li>
  </ul>
</header>

header {
  height: 90px;
  display: flex; /*←なぜかここにも入力するとうまく表示できます*/
}

ul {
  display: flex; /*←ここにだけ入力すれば良いと思うのですが*/
  align-items: center;
}

試したこと

cssで
headerにだけ
display: flex;
align-items: center;
両方を入力し、
ulには
何も書かない場合もうまく表示できません。

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

Answer 1

li要素はul要素の中で垂直中央に並んでいます。
header要素にflex指定をするとさらにul要素がheader要素の中で垂直中央に並ぶため、li要素もheader要素に対して垂直中央に並んだように見えます。
headerとul各要素にborderを付けた上でflexを付けたり外したりしてみると動きがわかりやすいかと思います。

Comments

[shimik]

ryo＿y様、ご回答ありがとうございます。
本やネットの情報では、ulにのみdisplay:flex;とalign-items:center;を指定すれば良いと書いてあるのですが、私の書き方が正しいものなのか、たまたまうまく表示されているるだけの間違ったやり方なのかがわからないでおります。
この点につきましても、ご指南いただけますと幸甚です。

[shimik]

私が、ulがliの集合体を示しているだけのもの(ul自体は幅や高さを持たない)なのか、ulはliを囲うブロック要素なのかを理解していないから分からない気がしてきました。
背景の色をつけて色々試したりはしていたのですが、ulの高さ幅の設定も変えたりして再度確認してみます。

Answer 2

<ul>に`display:flex;`を設定しても、親要素に合わせて、拡大・縮小するわけではありません。 <header>に高さ設定（90px）があるので、<ul>にも高さを設定しないと、余白が出来ている状態なので、<header>にも`display:flex;`を設定しないと、上下中央には来ません。

方法はいくつかありますが、<ul>にdisplay:flex;を設定のひとつの例として
※<ul>にはブラウザの初期値でmarginやpaddingがありますので、**「リセット」**掛けています。

header {
  height: 90px;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  height: 90px;
  background-color: #ccc;　/* ← 分かりやすいように色をつけています */
} 

li {
  list-style: none;
}

最初は大変ですが、flexは便利にいろんな場面で使えますので、頑張ってください。

Comments

[shimik]

yoshinavi様、ご回答ありがとうございました。
高さを変えて試してみて、やっと少し理解できました。
`flex`よりも`inline-block`を使って学習していたのですが、両方とも私にとっては理解のハードルが少し高いみたいです。
大変助かりました。
引き続き質問にお気付きの時は助けていただけると幸いです。

[yoshinavi]

レイアウトは、ブロック要素とインライン要素の組合せですが、各プロパティ値が、要素の種類によって効く効かないも出てきます。

「効かない！」時は、ブロック要素やインライン要素、そこに、親要素や子要素の関係も確認する必要があります。

ここを乗り越えれば、CSSの理解が一気に楽になるかと思いますので、頑張ってください。

解決されて何よりです。
(^^)