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

CSS を使用した同じ高さの列: 代替案としての Flexbox の探索

CSS レイアウトで同じ高さの列を追求すると、パーセンテージベースのテーブルに依存する場合に問題が発生する可能性があります。この問題に対処するために、フレックスボックスは、すべての列の高さが同じであることを保証する堅牢なソリューションを提供します。

HTML 構造

HTML 構造は、元のコード:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul></p>
<p><h3>更新版CSS</h3></p>
<p>同じ高さの列にフレックスボックスを実装するには、CSS を変更する必要があります。</p>
<pre class="brush:php;toolbar:false">ul {
  display: flex;
}

この簡単な変更により、ul がフレックス コンテナとその直接の子に変換されます。 (li) フレックス項目になります。デフォルトでは、フレックスボックスは flex-direction: row を適用して項目を水平に整列します。

gt;検討事項

• 項目の整列: ストレッチ

  • align-items の追加のデフォルト設定: ストレッチによりフレックスが発生する

• 同じ高さは兄弟にのみ適用されます

  • この機能は、同じフレックス内の項目にのみ影響しますコンテナ。

• 高さoverrides

  • フレックス項目の高さが手動で設定されている場合、高さが等しい動作が上書きされます。

• 同じ行の高さが等しい

  • 同じ高さは、同じ上のフレックス項目にのみ適用されますline.

• 均等な高さの無効化

  • 個々のフレックス項目で flex-shrink: 1 を設定すると、均等な高さを無効にできます。

ブラウザのサポート

Flexbox は、IE バージョン 10 より前のすべての主要なブラウザで広くサポートされています。複数のブラウザーでサポートする場合は、Autoprefixer を使用してベンダー プレフィックスを自動的に追加することを検討してください。

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