CSS フレックスボックスで列の高さを均等にする方法と制限は何ですか?

CSS を使用した等しい高さの列

CSS テーブルにパーセンテージを使用しようとすると、テーブルが本質的に次のように自動調整できないため、問題が発生します。フレックスボックス要素としてのコンテンツの高さ

高さの等しい列Flexbox

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul {
  display: flex;
}

このコードを使用すると、Flexbox は自動的に調整されます各リスト項目の高さを最も高い項目の高さに一致させ、結果として高さが同じになります。 columns.

フレックスボックスの等しい高さの列に関する考慮事項

• フレックスボックスの等しい高さの列は、ネストされた要素ではなく、兄弟要素にのみ適用されます。
• フレックス項目に高さを適用すると、同じ高さがオーバーライドされます機能。
• 同じ高さの列は、同じ行のフレックス項目にのみ適用されます。

フレックスボックスで同じ高さの列を無効にするには:

• align-items の代わりに flex-start または flex-end を設定します。ストレッチします。

以上がCSS フレックスボックスで列の高さを均等にする方法と制限は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。