vue知识点之在使用flex布局方式让最后一个元素居右（最右边）显示

一、理想效果

我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图

 

以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了：

二、实现方式

代码如下：

<div class="wrap">
　　<div class="item">标题1</div>
　　<div class="item">标题2</div>
　　<div class="item">标题3</div>
　　<div class="item">标题4 &nbsp; 标题5</div>
</div>

<style>
.wrap {
　　display: flex;
　　align-items: center;
　　width: 600px;
　　height: 42px;
　　background-color: green;
　　color: #fff;
}
.item {
　　padding: 0 10px;
}
.item:last-child {
　　margin-left: auto;
　　margin-right: 20px;
}
</style>

上面的最后（标题4，标题5）是在最后一个item中然后居右显示，当然也可以把这两个元素放到a标签或者span标签中再放入item中效果一样（可以把最后看似好几个元素居右显示）。

🔊 关键代码：父元素wrap中需要声明：display:flex。然后最后一个元素即.item：last-child{ margin-left:auto;}即可。