まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 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 がリクエスト ラインのデータを読み取って、リクエスト ラインを解析する方...
内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...
汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...
CSS操作 CS $("").css(名前|プロ|[,値|関数]) 位置$(&q...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...
目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...
この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...
目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...
目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...
イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...
国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...
Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な展開、コンテナ ...
目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...
効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...