フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします。ただし、複数列レイアウトにフレックスを使用すると、多くの人が次のような状況に遭遇すると思います。

これは、justify-content: space-between を使用しているために発生します。この設定を使用する理由は、要素間のスペースを具体的に計算する必要がなく、flex が計算してくれるためです。ただし、このため、次の行に要素が不足している場合、上記の状況が発生します。問題は明らかで、最後の行の要素が不足していることが原因です。そのため、最後の行に空の要素を追加してスペースを占有することが考えられます。これにより、上記の問題を完全に解決できます。

ここでは、プレースホルダーを実現するために疑似要素を使用します。疑似要素では幅のみを設定する必要があり、高さは設定する必要がないことに注意してください。詳細は以下の通りです。

.コンテナ::after{
      コンテンツ： '';
      幅:320ピクセル;
    }

効果は以下のとおりです。

しかし、ディスプレイ開発では、3 列レイアウトだけでなく、4 列レイアウトや 5 列レイアウトにも遭遇することになります。明らかに、上記のアプローチは現時点では機能しません。では、どのように解決するのでしょうか。解決策も非常に簡単です。原理は同じです。空要素を使用してスペースを占有します。今回は疑似要素を使用しません。実際の DOM 要素を使用して操作します。

空の要素の行を次のように記述します。

<div class="コンテナ">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <!-- 区切り線（以下は事前に書いた空要素） -->
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

対応する CSS 設定:

div:空{
      高さ: 0;
      幅:160ピクセル;
      境界線:なし;
    }

効果は以下のとおりです。

この時点で、列がいくつあっても、最初の問題を完全に解決できることがわかります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。