Implementation of layout at both ends of CSS layout

Recently during the development process, I encountered a layout that is aligned at both ends. It is laid out according to percentages. I have used flex layout before, but flex layout uses both ends. During layout, all bugs will appear. For example, when the following is dynamically generated, three or more columns will distribute the following list on both sides.
Although it can be solved, I still want to see how it is laid out using ordinary css. Because I wrote this.

I found some tutorials on the Internet, and they all operate with hard-coded widths. I changed it into a percentage format and recorded it simply.
First apply 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>

Then add 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>

Put these into html and you can see the effect.
As shown below

Finally summarize the formula

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

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of Implementation of layout at both ends of CSS layout. For more information, please follow other related articles on the PHP Chinese website!