Flex layout allows spacing and alignment on both sides

  <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

scss Code:

  ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li{
            flex: 0 0 24%;
            border:1px solid red;
            height: 40px;
        }
    }

if the number of li is exactly divisible by 4, it"s no problem. If you add the last one, you will run to the right
is there any way to make the first left of each line of li have no distance from the right, but there is no distance between the two in the middle?

also tries to solve it with pseudo elements, but pseudo elements leave no distance between the last one and the last one
here, and then think that there is a way to add margin-right to the last one, but there will be a problem if the number of li is exactly divisible by 4. Tangled!

Flex css css3 html5

Jan.08,2022

ul layer flex left alignment
li layer spacing via margin
the 4n right margin is 0
the margin of the remaining 1% is 0.5% from the 4n + 1 left, to achieve the left and right white space

// 
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

    li {
        flex: 0 0 24%;
        margin-right: 1%;
        border:1px solid red;
        box-sizing: border-box;                
        height: 40px;
        &:nth-child(4n) {
            margin-right: 0;
        }
        &:nth-child(4n+1) {
            margin-left: 0.5%;
        }
     }
}

add a few blank tags after

this is really bad, either add a few more blanks, or use float layout!

The answer from the one upstairs is also fine. What I did before was to add a div to the li

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            flex: 0 0 25%;
            padding-right: 10px;
            box-sizing: border-box;  
            div{
                border:1px solid red;
                height: 40px;
            }

            &:nth-child(4n){
                padding-right: 0;
            }
        }

    }

when setting justify-content: space-between; in ul, I don't know if I understand whether

can't be solved with flex layout
with grid layout, but grid compatibility under ie is touching
reference:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body,
      html {
        width: 100%;
        height: 100%;
      }
      .content {
        width: 1000px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, 30%);
        grid-gap: 20px;
        justify-content: space-between;
        /* grid-auto-flow: row dense; */
      }

      .item {
        font-size: 4em;
        text-align: center;
        border: 1px solid -sharpe5e4e9;
      }

      .item-1 {
        background-color: -sharpef342a;
        grid-column-start: 1;
        grid-column-end: 3;
      }

      .item-2 {
        background-color: -sharpf68f26;
        /* grid-column-start: 1; */
        /* grid-column-end: 3; */
      }

      .item-3 {
        background-color: -sharp4ba946;
      }

      .item-4 {
        background-color: -sharp0376c2;
      }

      .item-5 {
        background-color: -sharpc077af;
      }

      .item-6 {
        background-color: -sharpf8d29d;
      }

      .item-7 {
        background-color: -sharpb5a87f;
      }

      .item-8 {
        background-color: -sharpd0e4a9;
      }

      .item-9 {
        background-color: -sharp4dc7ec;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="item item-1">
        1
      </div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </body>
</html>

Previous: How to customize the icon and its style of Baidu map point aggregation

Next: About the question that PYTHON uses with open with For to read files and run until the For loop stops execution?