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

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

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

これは、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

推薦する

Docker-compose を使用して GitLab をデプロイする方法

Docker-compose は GitLab をデプロイします1. Dockerをインストールする...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

mysql スケジュールタスク (イベント イベント) の詳細な説明

1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...

Mysql varchar型の合計操作例

友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

私が遭遇したIE8の互換性に関する注意事項

1. IE8 の getElementById は id のみをサポートし、name はサポートしま...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...

Linuxでスクリーンショットを撮って編集するための最高のツール

メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...

MySQLデータベースの追加、削除、変更操作の詳細な説明

データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...