フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

まずはコードと効果を見てみましょう↓

<スタイル>
        。主要 {
            アウトライン: 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.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

VirtualBox に CentOS、JDK、Hadoop をインストールする詳細なチュートリアル

目次1. 前提条件1.1 サポートされているプラ​​ットフォーム1.2 jdk および hadoop...

MySQL の厄介な Aborted 警告をケーススタディで分析する

この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明

簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...

さまざまな環境での Docker Compose のインストール方法

1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...

MySQLでorder byを使用せずにランキングを実装する3つの方法のまとめ

ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...

JSでよく使われるデータ処理方法

目次DOM処理配列方法要約するDOM処理DOM はドキュメントの構造化された表現を提供し、スクリプト...

Windowsタイムサーバーの設定方法の詳しい説明

最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

MySQLデータファイルの保存場所を表示する方法

次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...

親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...