[CSSチュートリアル】ボックス内の複数要素を両端揃えの効果で実現するCSS

要素の両端の整列のレイアウトは、実際の開発のどこでも見ることができ、フレックスレイアウトを使用して--justify-content：スペース間を簡単に実現することができますが、いくつかのシナリオは、互換性やその他の問題を考慮する必要があるので、我々は同じ効果を達成したい、レイアウトを勉強する必要がありますいくつかの答えをネットワーク検索した後、本当にシンプルで実質的には、いくつかの問題を解決することがわかった、確かに私はしばしば実際のプロジェクトのようなレイアウトに遭遇するので、私は交換するために、ここで実装の原則を共有する私の空き時間を使用し、共有する

必要なシーン

定義されたボックスの元のレイアウトに影響を与えることなく、定義された幅のボックスにアイテムの両端を整列させる。

<div class="container">
        <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>

ここで、以下の項目があるとします。

* {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 1200px;
        height: 500px;
        background-color: aqua;
        margin: 0 auto;
    }
    
    ul {
        /* The key is the width of the element, which is shifted by the negative margin to overlap with the container */
        width: 1220px;
        margin-left: -20px;
        list-style: none;
    }
    
    ul li {
        float: left;
        /* width = (box-width - margin-spacing * number of items in a row - 1) / number of items in a row */
        /* (1200px - 20 * 2) / 3 */
        width: 386.666px;
        height: 60px;
        margin: 0px 0 20px 20px;
        background-color: red;
    }

cssのキーは、我々は項目の幅を計算する必要があるということです、/* 幅=（ボックス幅 - 余白の間隔*行の項目の数-1）/行の項目の数*/ 、ここで私は行に3つの項目を表示するつもり、それは（1200px - 20 * 2）/3です。なぜ行の項目数 - 1はmarignを計算するために幅を占有し、3つの項目は、3つのマージンであってはならない、これは整列の両端の実現の本質は、フローティングレイアウト、ストリーム上の要素の行を1つずつ想像し、流れ方向の幅が十分でない場合です。あなたが表示する行のQiをさせたい場合は、要素は、行に折り畳まれる、我々は確かにそれはまた、ディスプレイの整列の両端に達しラインを折るしないように、0に第三項目のマージン値を設定することができます、これは本当に問題ありませんが、一度項目の数です。とはわからないときに、どのようにマージンの行の最後の項目をキャンセルするのですか、明らかに0にマージンを設定することが最善の解決策ではありませんが、この時点であなたは彼のアウトソーシングボックス、外部ボックスul（ここで私はulタグを使用して、ブロックタグすることができます）と-マージンの値が設定されている行うことができます。

外箱の幅が1220pxである理由

画像

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

これはulの幅です。そう、コンテナよりも大きく、右側よりも大きいので、この時点でulは視覚的に-marginで整列されます。

ulの背景色をキャンセルすると、以下のような効果になります。

まとめ

CSSのこの記事は、両端のボックス内の複数の要素の整列の効果を達成するために導入され、より関連するCSS要素のボックスの整列の内容は、スクリプトのホーム以前の記事を検索するか、次の関連記事を参照してください続けて、私はあなたがよりスクリプトのホームをサポートしています願っています！この記事で紹介されているのは、ボックスの整列の効果です。