乐趣区

关于前端:小技巧在flex布局当中使其中一个元素居右或居左

flex justify-content 属性定义了我的项目在主轴上的对齐形式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,我的项目之间的距离都相等。
space-around:每个我的项目两侧的距离相等。所以,我的项目之间的距离比我的项目与边框的距离大一倍。
然而须要有一个元素脱离布局,须要独自居右怎么办呢?
用 margin-left:auto;

margin 的概念就是给元素增加距离,比方 margin-left:50px;
margin-left:auto 原理就是会计算以后的整个可用空间,而后将这么多的空间安顿在元素的左侧,后果将元素始终向右推。

<ul class="flex-box">
  <li v-for="it in 5" :key="it"></li>
</ul>

.flex-box {

display: flex;
width: 300px;
li {
  width: 50px;
  height: 50px;
  background: red;
  &:last-child {
    background: yellow;
    margin-left: auto;
  }
}

}

退出移动版