网络日志

小技巧--在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;
  }
}

}