問題1: align-itemsが効かない

Question

問題

以下のコードで、子要素を縦方向の中央に配置したいのですが、align-items: centerを指定しても中央に配置されません。なぜでしょうか？

HTML

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

CSS

.container {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
}

.item {
  padding: 10px;
  margin: 5px;
  background-color: #4CAF50;
  color: white;
}

実行結果

アイテム1

アイテム2

アイテム3

※ コンテナに高さがないため、中央配置が効いていないように見えます（コンテンツの高さ = コンテナの高さ）

Answer 1

問題の原因

align-itemsプロパティは正しく動作していますが、フレックスコンテナに高さが指定されていないため、コンテナの高さがコンテンツの高さと同じになっています。

技術的な説明

フレックスコンテナ：display: flexが指定された要素
主軸（main axis）：デフォルトでは水平方向（左から右）
交差軸（cross axis）：主軸に垂直な軸（デフォルトでは垂直方向）
align-items：交差軸に沿ったアイテムの配置を制御

コンテナの高さが自動（auto）の場合、コンテンツの高さに合わせて収縮するため、縦方向の余白がなくなり、中央配置の効果が視認できません。

修正コード

CSS（修正版）

.container {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  height: 200px;  /* 高さを明示的に指定 */
}

.item {
  padding: 10px;
  margin: 5px;
  background-color: #4CAF50;
  color: white;
}

修正後の実行結果

アイテム1

アイテム2

アイテム3

※ 高さを指定することで、縦方向の中央配置が確認できます

その他の解決方法

min-heightを使用

.container {
  min-height: 200px;  /* 最小高さを指定 */
}

ビューポート単位を使用

.container {
  height: 100vh;  /* ビューポートの高さいっぱい */
}

親要素から高さを継承

.parent {
  height: 400px;
}
.container {
  height: 100%;  /* 親要素の高さを継承 */
}

覚えておくポイント

Flexboxのalign-itemsが効かないと感じたら、まずコンテナの高さを確認しましょう。高さが自動調整されている場合、配置効果が見えないことがよくあります。