Flex アイテムが並べて表示されないようにする方法は?

フレックス項目が並んでレンダリングされないようにする

問題:

フレックスボックスを使用してブロック内の要素を中央に配置する場合、項目が垂直に上下に表示されるのではなく、横に並んで表示されるという問題がよく発生します。これは状況によっては望ましくない場合があります。

解決策:

フレックス項目が並べて表示されないようにするには、次の CSS スタイルを実装します:

.inner {
  flex-direction: column;
}

説明:

このスタイル プロパティコンテナ要素内でフレックス項目が配置される方向を指定します。 flex-direction を column に設定すると、フレックスボックスにその子を列ではなく行に表示するように指示できます。これにより、必要に応じて項目が垂直方向に互いに下に配置されます。

更新された例:

次の更新されたコード スニペットは、このソリューションがどのように機能するかを示しています:

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

flex-direction: column を利用することで、オレンジ色の四角形とテキストがコンテナ要素内で垂直方向に適切に積み重ねられるようになりました。

以上がFlex アイテムが並べて表示されないようにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。