css3如何解决水平和垂直方向每个div的间隔都一样？

Question

目前想到的

用column-count:2;column-gap:5px;效果不是很好

用

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;

有个问题是第二行如果只有一个div，它居中了

我想要的效果是

图中的 1 2 3 4间隔是一样的，并且第二行及后续行后如果只有一个元素，左对齐，和上一行的第一个元素左对齐

Answer 1

方案一（推荐）

查看例子

给每个 item 设置相同的 margin-left 和 margin-top 就好了。

<ul class="container">
    <li class="item">产品 1</li>
    <li class="item">产品 2</li>
    <li class="item">产品 3</li>
    <li class="item">产品 4</li>
    <li class="item">产品 5</li>
    <li class="item">产品 6</li>
    <li class="item">产品 7</li>
    <li class="item">产品 8</li>
    <li class="item">产品 9</li>
</ul>

*{padding: 0;margin: 0;box-sizing: border-box;}

body{
    width: 375px;
    margin: 0 auto;
    background: #f3f3f3;
}

ul,li{list-style: none}

.container{
    display: flex;
    
    flex-wrap: wrap;
    background: #fff;
    /*
    如果觉得最上面有一个空白很奇怪，可以用负的 margin,
    -10px 就是下面的 margin-top 顶出来的
    */
    margin-top: -10px;
}

.item{
    /*
    375 是屏幕的宽度，
    30 是横向的3个空白间隙的距离，一个 10 px
    2 表示2列
    在实际开发中，我们可以用 vw 来替换掉 px 
    */
    width: calc((375px  - 30px ) / 2);
    height: 300px;
    background: green;
    margin-left: 10px;
    margin-top: 10px;
    color: #fff;
    padding: 10px;
}

方案二

查看例子

<ul class="container">
    <li class="item">产品 1</li>
    <li class="item">产品 2</li>
    <li class="item">产品 3</li>
    <li class="item">产品 4</li>
    <li class="item">产品 5</li>
</ul>

*{padding: 0;margin: 0;box-sizing: border-box;}

body{
    width: 375px;
    margin: 0 auto;
    background: #f3f3f3;
}

ul,li{list-style: none}

.container{
    display: flex;
    
    flex-wrap: wrap;
    background: #fff;
    /* 也可以使用这个，现在去掉了 item 里面的 margin-left ，但是还是要处理单个的情况*/
    justify-content: space-evenly;
}

.item{
    width: calc((375px  - 30px ) / 2);
    height: 300px;
    background: green;
    color: #fff;
    padding: 10px;
    margin-top: 10px;
}

/* 选择最后一个元素，是单数的情况，左边要主动给 10px ，上面是自动设定的，右侧要给 auto ，这两个都是必须的 */
.item:last-child:nth-child(odd){
    margin-left: 10px;
    margin-right: auto;
}

Answer 2

flex布局的话。

1. 给后面补俩空标签
2. 改 justify-content: space-around; 为左对齐。 然后通过 nth-child 纠正间距。
3. 改 justify-content: space-around; 为两端对齐。父级做左右边距

Answer 3

flex布局，子元素用padding做间隔，然后孙子元素为卡片

 <style>
    .box{
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #000;
    }
    .item{
      width: 50%;
      height: 100px;
      padding: 5px;
      box-sizing: border-box;
    }
    .item:nth-child(odd){
      padding-left: 10px;
    }
    .item:nth-child(even){
      padding-right: 10px;
    }
    .card{
      height: 100%;
      border-radius: 10px;
      background: red;
    }
  </style>
  <div class="box">
    <div class="item">
      <div class="card">222</div>
    </div>
    <div class="item">
      <div class="card">222</div>
    </div>
    <div class="item">
      <div class="card">222</div>
    </div>
    <div class="item">
      <div class="card">222</div>
    </div>
    <div class="item">
      <div class="card">222</div>
    </div>
  </div>