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

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

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

これは、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 を応援していただければ幸いです。

<<:  虫眼鏡ケースのJavaScriptオブジェクト指向実装

>>:  HTML タグに類似: strong および em、q、cite、blockquote

推薦する

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

同じ IP のアクセス頻度を制限するように nginx を設定する方法

1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...

WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

時間別にグループ化された MySQL クエリ ステートメント

年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

MySQLトリガーの概念、原理、使用法の詳細な説明

この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...