Flex アイテムを水平ではなく垂直に配置するにはどうすればよいですか?

フレックス項目を垂直方向に整列させる

フレックスボックスを使用して要素を中央に配置する場合、項目が垂直方向ではなく水平方向に重なるとイライラすることがあります。この問題は、フレックス項目にテキストや画像などの自然なインライン フローがある場合に発生します。

問題:

次のコード スニペットを考えてみましょう:

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

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

その目的は、オレンジ色の四角形とテキストの両方を .inner コンテナー内で中央に配置することです。ただし、出力では正方形とテキストが並べて表示され、テキストは途中で切り取られます。

解決策:

この動作を修正するには、次の操作が必要です。 .inner コンテナのフレックス方向を変更します。デフォルトでは、flexbox はその子を水平方向に表示します。垂直方向にスタックするために、flex-direction プロパティを column に設定します。

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

この更新されたコード スニペットは、flex 項目を強制的に垂直方向に配置し、横に並べてスタックする問題を解決します。

更新された出力:

オレンジ色の四角が元のようにテキストの上に表示されます。意図した。これは、フレックス コンテナ内で特定の要素を特定の方法で整列させたい場合に便利なテクニックです。

以上がFlex アイテムを水平ではなく垂直に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。