flexboxでの文字の中央揃えについて

Question

実現したいこと

Flexboxにおいてテキストをボックスの中央に揃えたい

前提

flexboxで3つ並びのボックスの順番をPC表示とSP表示で変化させる課題をしています。
display:flexで3つ並びにし、ボックスを中央揃えにしたとこまではよかったのですが、それぞれのテキストA・B・Cがどうしてもボックスの真ん中に揃わず左上寄せになります。

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

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
上記のコードを適用しても文字がボックスの中央に行かない。

<h2 class="question--title">Q5 flexboxの入れ替え(逆順)</h2>
<div class="reverse-box flex">
  <div class="content-red">A</div>
  <div class="content-blue">B</div>
  <div class="content-orange">C</div>
</div>



.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-red {
  background-color: #ff0000;
  width: 300px;
  height: 300px;
}

.content-blue {
  background-color: #0008ff;
  width: 300px;
  height: 300px;
}

.content-orange {
  background-color: #ff8400;
  width: 300px;
  height: 300px;
}

@media screen and (min-width:960px) {

  .reverse-box {
    flex-direction: row;
  }

}

@media screen and (max-width:959px) {

 .reverse-box {
    flex-direction: row-reverse
  }

}

よろしくお願いいたします。

Answer 1

文字を中央にしたいなら、.flex直下のアイテムにdisplay: flex;を設定する必要があります。

.flex, .flex > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

動くサンプル：https://jsfiddle.net/1z4f8c2v/

---

【フレックスコンテナー内のアイテムの配置 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container

Comments

[aika00]

丁寧な回答ありがとうございました！
動くサンプルまで非常にわかりやすかったです！