Flex アイテムを垂直方向に整列するにはどうすればよいですか?

Flex 項目を垂直に整列する

Flexbox は、コンテナ内で要素を配置する便利な方法を提供します。ただし、項目が望ましい垂直方向の順序ではなく横に並べて表示されるという問題が発生する場合があります。これは、display: flex.

を使用しているときに発生する可能性があります。フレックス項目が並べて表示されないようにするには、次のスタイルを親要素に追加するだけです:

flex-direction: column;

このディレクティブは、フレックスボックスに対して、その子を列ではなく列に表示するように指示します。 rows.

例:

提供されたコード スニペット内:

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

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

最初に、「square」要素と「some text」要素は並べて置かれる。これを修正するには、次の CSS を追加します。

.inner {
  flex-direction: column;
}

これにより、「正方形」が「テキスト」要素の上に配置され、目的の垂直レイアウトが実現されます。

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