前端进阶html+css05---justify-content: space-between对齐方式的问题(最后一行元素不够)

正常情况下10应该在6的下面。但是justify-content: space-between会导致下面这种情况。在这里插入图片描述
解决方案:
添加额外的span, 让span的宽高和粉色小方块的宽一样,高为0。把剩余的空填起来。

注:需要添加n-2个span,n为一行小方块的数量,因为当最后一行只有一个小方块的时候,默认放在最左边,不需要添加额外的小方块。只有当最后一行有两个及以上的小方块才需要填充。

<style>
  .box{
   background-color: antiquewhite;
   width: 430px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
  }
  .item,span{
    background-color: pink;
    width: 100px;
    height: 100px;
    /* margin: 10px; */
    margin-bottom: 10px;
  }
  span{
    height: 0;
  }

</style>
<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <span></span>
    <span></span>
  </div>
</body>

成果:
在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值