フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします。ただし、複数列レイアウトにフレックスを使用すると、多くの人が次のような状況に遭遇すると思います。 これは、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マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...
1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...
CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...
この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...
導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...
一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...
この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...
この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...
この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...
基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...