Flex アイテムが垂直に積み重ねられずに横に並んでレンダリングされるのを防ぐにはどうすればよいですか?

フレックス項目を並べてレンダリングしないようにする

フレックスボックスを使用するとき、項目を中央に配置したい状況によく遭遇します。ブロックですが、各項目が独自の行を占めます。残念ながら、アイテムを下に配置したい場合、フレックスボックスはアイテムを脇に移動することがあります。

次の HTML 構造を考えてみましょう。オレンジ色の四角形とテキスト要素が、justify-content: center と flexbox を使用してコンテナ内に配置されています。 align-items: center:

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

および関連付けられた CSS:

.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;
}

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

適用時フレックスボックスでは、オレンジ色の四角がテキストの上に配置されるのではなく、横に配置されます。これを修正するには、内部コンテナの flex-direction プロパティを変更する必要があります。

.inner {
  ...
  flex-direction: column;
}

Flex-direction: 列を設定すると、子を行ではなく上下に垂直に表示するようにフレックスボックスに指示されます。 。この動作は要件に沿っており、テキストの上にオレンジ色の四角形が配置されます。

以上がFlex アイテムが垂直に積み重ねられずに横に並んでレンダリングされるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。