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

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

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

<スタイル>
        。主要 {
            アウトライン: 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 ロック) の理論とロック タイプ テスト

推薦する

nginx リクエスト ヘッダー データ読み取りプロセスの詳細な説明

前回の記事では、nginx がリクエスト ラインのデータを読み取って、リクエスト ラインを解析する方...

Windows 10 での Hyperledger Fabric 1.4 環境構築プロセスの図

内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...

Spark SQL の 4 つの一般的なデータ ソースの詳細な説明

汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...

jQueryとCSSを組み合わせてトップに戻る機能を実現

CSS操作 CS $("").css(名前|プロ|[,値|関数]) 位置$(&q...

Nginx 仮想ホストを構成する 3 つの方法 (ポートベース) の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

Linuxでユーザーが所属するグループを変更する方法

Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

Docker 用ビジュアル UI 管理ツール Portainer のインストールと使用方法の分析

Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な展開、コンテナ ...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...