CSS achieves the effect of aligning multiple elements at both ends in a box

The arrangement layout of aligning the two ends of elements can be seen everywhere in actual development. It can be easily achieved by using the --justify-content: space-between of the flex layout. However, in some scenarios, we need to consider compatibility and other issues, so we have to give up the flex layout. Therefore, if we want to achieve the same effect, we need to study typesetting. After searching the Internet for answers, I found that there are very few really simple and substantial ones that can solve the problem. Indeed, I often encounter this kind of layout in actual projects, so I use my spare time to share its principle implementation here for communication and sharing.

Scenario Requirements

In a box of a certain width, align the two ends of the item without affecting the original layout of the box.

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

Suppose we have these items here

* {
        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 overlapped with the container by shifting the margin negative value*/
        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;
    }

The key to CSS is that we need to calculate the width of the item, /* width = (box width - margin spacing * number of items in a row - 1) / number of items in a row */, here I plan to display three items in a row, then it is (1200px - 20 * 2) / 3, why is the number of items in a row - 1 to calculate the width occupied by the marign, shouldn't three items be three margins, this is the essence of achieving alignment on both ends, imagine a floating layout, a row of elements are arranged one by one on the flow, when the width of the flow direction is not enough, the elements will be arranged in a folded line, if you want to display them in a row, we can indeed set the margin value of the third item to 0, so that it does not break and also achieves the display mode of alignment on both ends, there is indeed no problem with this, but once the number of items increases and is uncertain, how do you cancel the margin of the last item in a row, obviously setting the margin to 0 is not the best solution, then at this time you can deal with its outer box, the width of the outer box ul (here I use the ul tag, block tags are fine) and the -margin value setting.

Why is the width of the outer box 1220px

This is the original width of the container

This is the width of ul. Yes, it is larger than the container, and it is larger on the right. Then, after processing ul with -margin, the two ends can be visually aligned.

After canceling the background color of ul, the effect is achieved

Summarize

This is the end of this article about how to use CSS to align multiple elements in a box. For more information about CSS element box alignment, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!