Flex アイテムが並べて表示されないようにするにはどうすればよいですか?

フレックス項目が並べて表示されないようにする

フレックスボックスは、ブロック内で項目を整列させる効果的な方法を提供します。ただし、アイテムを水平方向ではなく垂直方向に表示する必要があるシナリオに遭遇した場合、デフォルトの flex 動作が障害になる可能性があります。

問題ステートメント:

にもかかわらずフレックスボックスを使用して項目をブロック内の中央に配置すると、項目は引き続き並べて表示されます。望ましい結果は、各項目が独自の行を占めることです。たとえば、オレンジ色の四角形はテキストの上にあるはずですが、flex によってテキストの横に再配置されました。

解決策:

この問題を解決する鍵は次のとおりです。次のスタイルを追加する際:

.inner {
  flex-direction: column;
}

フレックス方向として「column」を指定することで、 flexbox を使用して子を垂直に表示します。これにより問題が解決され、項目が意図したとおりに配置されます。

更新されたスニペット:

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

<style>
  .container {
    ...
  }

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

  .square {
    ...
  }
</style>

「flex-direction」プロパティを「column」に設定すると、フレックスボックス要素が行に表示されるようになり、横に配置するという元の問題が解決されました。

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