Flexbox はどのようにして CSS で同じ高さの列を実現できますか?

CSS での同じ高さの列に対する Flxexbox ソリューション

コードでは、同じ高さの列のパーセンテージを含むテーブルを使用しようとしています。ただし、このアプローチでは課題が発生する可能性があります。実行可能な代替手段として、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;
}

Withこのシンプルな Flexbox の実装により、リスト項目の高さに関係なく、すべてのリスト項目が同じ高さを維持することができます。 content.

仕組み:

• の display: flex プロパティ
  デフォルトでは、フレックス コンテナはその子要素 ​​(フレックス アイテム) を水平に配置します。

  デフォルトの align-items:stretch プロパティは、フレックス アイテムがコンテナの全高、結果的に同じ高さになりますcolumns.

  • 注意:
  • フレックスボックスの等しい高さの列は兄弟要素にのみ適用されます。
  • 要素に特定の高さを設定するフレックス項目は、等高さ機能をオーバーライドします。
  等高さの列は、単一の列内でのみ機能します。 line.

  Flexbox での等高動作を無効にするには、align-items: flex-start または align-items: flex-end を使用します。

  Browser Support:Flexbox は、Chrome、Firefox、Safari、Edge などの最新のブラウザーで広くサポートされています。 IE などの古いブラウザの場合

  以上がFlexbox はどのようにして CSS で同じ高さの列を実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。