flex布局[一行三个元素,剩下的元素自动换行,左对齐]

1: 需求: 每一行三个元素,剩下的元素自动换行,而且左对齐[如图] 在这里插入图片描述
2: 实现之后的样子
3: 实现的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 50%;
      box-shadow: 0 0 10px rgb(31 55 153 / 10%);
      background: #FFF;
      padding: 20px;
    }

    ul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 0 -13px;
    }

    ul div {
      box-sizing: border-box;
      width: 33.33%;
      padding: 0 13px;
      margin-bottom: 24px;
    }

    ul div li {
      list-style: none;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #EBEDF0;
    }

    .father .second {
      height: 100px;
      background: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="father">
    <ul>
      <div>
        <li>1111</li>
      </div>
      <div>
        <li>222</li>
      </div>
      <div>
        <li>333</li>
      </div>
      <div>
        <li>444</li>
      </div>
      <div>
        <li>555</li>
      </div>
    </ul>
    <div class="second">我是第二个子元素</div>
  </div>

</body>

</html>

4: 需要注意的点
1): 第一次写的时候,一半思路是给每一个子元素的宽度为31%,右边距(margin-right:2%)为2%,3的倍数的元素没有右边距,但是这样写的话元素占比有误差,总宽度达不到100%, 没法实现与并列的子元素左右对齐,遂换内边距的写法;

2): 实现思路: 在这里插入图片描述
3): 注意点:

box-sizing默认值为content-box,其width 不包括 padding 和 border,因此在子元素宽度为33.33%的基础上再次加上内边距会导致自动换行,所以要将 box-sizing的值改为 border-box
border-box: width 包括 padding 和 border,则增加padding或border大小不会影响块状元素的大小，只会压缩content大小

原文链接：https://blog.csdn.net/H_keoow/article/details/114914708