flex实现第一个元素右对齐或者最后一个元素左对齐

发布于 2021-12-18 135 次阅读

// 父盒子
.box{
display:flex;
flex-wrap: wrap;
}
// 第一个子元素，一直靠左显示
// 给第一个子元素添加：margin-right：auto；

// 最后一个子元素，一直靠右显示
// 给最后一个子元素添加：margin-left：auto；
但是这样会导致布局最后一排元素无法竖向对其

2.使用占位元素

css

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- 假设一行有5列，即5个元素 -->
  <li v-for="item in 5" :key="item" class="temp"></li>
</ul>

css

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  width: 18%;
  margin-bottom: 20px;
  height: 200px;
  background: pink;
}

.temp { 
  width: 18%; 
  height: 0; 
  margin: 0; 
}