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 标题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;}即可。