CSSは複数の要素をボックスの両端に揃える効果を実現します

要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウトの --justify-content: space-between を使用すると簡単に実現できます。ただし、いくつかのシナリオでは互換性などを考慮する必要があり、フレックスレイアウトをあきらめなければなりません。したがって、同じ効果を実現したい場合は、タイプセッティングを研究する必要があります。インターネットで答えを検索した後、問題を解決できる本当にシンプルで実質的な答えはほとんどないことがわかりました。実際、実際のプロジェクトでこの種のレイアウトによく遭遇するため、コミュニケーションと共有のために、余暇を利用してここでその基本的な実装を共有します。

シナリオ要件

特定の幅のボックスで、ボックスの元のレイアウトに影響を与えずにアイテムの両端を揃えます。

<div class="コンテナ">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

ここにこれらのアイテムがあるとします

* {
        マージン: 0;
        パディング: 0;
    }
    
    。容器 {
        幅: 1200ピクセル;
        高さ: 500px;
        背景色: 水色;
        マージン: 0 自動;
    }
    
    ul {
        /* キーは要素の幅で、マージンを負の値にシフトすることでコンテナと重なります*/
        幅: 1220ピクセル;
        左マージン: -20px;
        リストスタイル: なし;
    }
    
    ul li {
        フロート: 左;
        /* 幅 = (ボックスの幅 - 余白の間隔 * 行内の項目数 - 1) / 行内の項目数*/
        /* (1200px - 20 * 2) / 3 */
        幅: 386.666px;
        高さ: 60px;
        マージン: 0px 0 20px 20px;
        背景色: 赤;
    }

CSSの鍵は、アイテムの幅を計算する必要があることです両端のメント、フローティングレイアウト、フロー方向の幅が十分ではない場合、フローの列が1つずつ折りたたまれていると想像してください最後に連続して、明らかにマージンを0に設定するのが最良のソリューションではありません。現時点では、外側のボックス、外側のボックスULの幅（ここではULタグを使用し、ブロックタグは問題ありません）、および-Margin値設定を扱うことができます。

外箱の幅が1220pxなのはなぜですか

これはコンテナの元の幅です

これは ul の幅です。はい、コンテナよりも大きく、右側が大きくなっています。その後、ul を -margin で処理すると、両端が視覚的に揃います。

ulの背景色をキャンセルすると、効果が得られます

要約する

CSS を使用してボックス内の複数の要素を整列させる方法については、これで終わりです。CSS 要素ボックス整列の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。