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!

Jan.08,2022

  1. ul layer flex left alignment
  2. li layer spacing via margin
  3. the 4n right margin is 0
  4. 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>

image

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b327a9-2be00.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b327a9-2be00.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?