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

目前想到的

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

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

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

我想要的效果是

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

阅读 3.3k
3 个回答

方案一(推荐)

查看例子

给每个 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;
}

flex布局的话。

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

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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题