flex布局采用justify-content:space-between时,当为两个内容时中间被空出

最新推荐文章于 2024-01-29 10:15:05 发布

码农小权权

最新推荐文章于 2024-01-29 10:15:05 发布

阅读量278

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40280730/article/details/115793745

版权

flex布局采用justify-content:space-between,当为两个内容时中间被空出
给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”

<div class="tem-flex">
  <div class="tem-list" v-for="item in len">列表</div>
</div>
.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  <!--加上after伪类，解决最后一排数量不够两端分布的情况-->
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }