まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px 実線; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; } .main>div { 幅: 100ピクセル; 高さ: 100px; 下マージン: 10px; 背景色: 薄緑; } </スタイル> <本文> <div class="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </本文> 最後の div が中央ではなく末尾にあることがわかります。 justify-contentをspace-betweenに設定しているので、両側がくっついていることを意味します このとき、最も外側の div に疑似要素を設定することができ、幅は内側の div の幅と同じになります。 たった2行のCSSで十分です .main:後{ コンテンツ: ""; 幅: 100ピクセル; } 効果を見てみましょう 実際、最後の疑似要素が彼を圧迫するのが原則です。 9個あっても高さは0なので問題ありません。下の図をご覧ください↓ フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法についての記事はこれで終わりです。フレックスレイアウトのスペース間の左揃えの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します
>>: MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト
通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...
目次1. 前提条件1.1 サポートされているプラットフォーム1.2 jdk および hadoop...
この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...
Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...
この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...
1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...
ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...
目次DOM処理配列方法要約するDOM処理DOM はドキュメントの構造化された表現を提供し、スクリプト...
最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...
この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...
基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...