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

posted on 2024-08-22 23:17  梁飞宇  阅读(179)  评论(0)    收藏  举报