在使⽤flex布局⽅式让最后⼀个元素居右（最右边）显⽰，⼀层HTML结构实现左“右”布局，。。。
我们在布局的时候通常会在导航栏上有居左和居右显⽰，中间留⽩，这样页⾯伸缩的时候不会影响效果。形如下图
以往我们可能更多会使⽤float浮动布局来实现这种效果，但是flex得到⼴泛⽀持以后就可以更⽅便和快捷的实现这种效果了：
代码如下：html span 居中
<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 {
width: 600px;
height: 42px;
background-color: green;
color: #fff;
display: flex;
align-items: center;
}
.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;}即可。
flex 布局中，如果想让内容超出显⽰...（ellipsis）不成功，需要改为display:block。如果想在flex中这样显⽰... 可以给元素加上 min-width:0就可以了
使⽤flex实现居中对齐
⽅式⼀
利⽤margin:auto；属性值还可以极⽅便的设置我们常⽤的上下左右居中，效果如下：
代码如下：
<div class="item"></div>
</div>
<style>
.wrap {
width: 400px;
height: 200px;
border: 1px solid #c00;
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: auto;
}
</style>
如果你曾经⽤过把容器的左右外边距都设置为 auto 以让页⾯布局显⽰在视⼝中间的⽅法的话，你肯定知道⾃动外边距能够消化掉全部的多余空间。当把两侧的外边距都设置为 auto 时，块元素就会被挤到中间，多余的空间则被留到两侧。
关键代码：⽗元素的display：flex；要据中的元素：margin:auto;
⽅式⼆
flex中还有⼀种⽅式可以实现同样的效果，代码如下：
<div class="wrap">
<div class="item"></div>
</div>
<style>
.wrap {
width: 400px;
height: 200px;
border: 1px solid #c00;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
关键代码：⽗元素wrap上同时设置：display:flex;justify-content:center;align-items:center；利⽤align-items:center；还可以实现⽂字上下居中显⽰。
使⽤grid布局实现相同效果代码类似使⽤flex。
上⾯提到了flex实现上下左右居中对齐的⽅式，利⽤这种⽅式我们会发现我们可以不⽤在意要居中的元素的⼤⼩，可以让其随内容⾃增长也能让其居中显⽰。同样的效果（不⽤在意居中元素⼤⼩）还可以利⽤transform以及绝对定位来实现：
<div class="item">123123123</div>
</div>
<style>
.wrap {
width: 400px;
height: 200px;
border: 1px solid #c00;
position: relative;
}
.item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
关键代码：⽗元素relative,⼦元素绝对定位，并且left:50%;top:50%;transform:translate(-50%,-50%)；
最后提⼀下常⽤的使⽤绝对定位，但是需要有宽度和⾼度值，并设置：margin-left:-width/2;margin-top:-height/2；即可居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。