CSSレイアウトの両端にレイアウトを実装

最近、開発プロセス中に、両端が揃っているレイアウトに遭遇しました。パーセントに従ってレイアウトされます。以前はフレックス レイアウトを使用していましたが、フレックス レイアウトは両端を使用します。 . レイアウト中にあらゆるバグが発生します。たとえば、以下を動的に生成すると、3 列以上で以下のリストが両側に分散されます。
解決はできますが、やはり普通のCSSでどのように配置されるのか見てみたいです。これは私が書いたからです。

インターネットでいくつかのチュートリアルを見つけましたが、それらはすべてハードコードされた幅で動作します。それをパーセント形式に変更して簡単に記録してみました。
まず css を適用します

<style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        .max-box {
            max-width: 1200px;
            margin: 0px auto;
        }
        
        .box {
            overflow: hidden;
            width: calc(100% + 20px);
            margin-left: -10px;
        }
        
        .inner {
            height: 100px;
            border: solid 1px red;
            float: left;
            margin-left: 10px;
            width: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            max-width: 1200px;
            margin: 50px auto;
            border: solid 1px red;
            height: 200px;
        }
    </style>

次に html を追加します

 <p class="max-box2">

    </p>
    <p class="max-box">
        <p class="box">
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
        </p>
    </p>

これらを HTML に入力すると、効果がわかります。
以下に示すように

最後に数式をまとめます

x = 10px; 即：想要的间距
y = 4     即：想要排列的个数
父级：  width: calc(100% + (x * 2));
子级：  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

推奨チュートリアル: 「CSSチュートリアル」

以上がCSSレイアウトの両端にレイアウトを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。