⽤Flex布局制作块元素右边对齐效果
最近想做⼀个停靠在窗⼝右边的⼩型导航条，⿏标进⼊时当前项向左伸展效果。
经过⼏次尝试后，⽤Flex布局可以实现。
HTML代码：
<div class="rightnav">
<div><a href="#">⾸页</a></div>
<div><a href="#">⽬录</a></div>
<div><a href="#">顶部</a></div>
</div>
CSS：
.rightnav{
position: fixed;/*窗⼝绝对定位*/
right: 0;
bottom: 150px;
font-size: 12px;
z-index: 80;
display: flex;/*flex布局*/
flex-direction: column;/*垂直排列*/
flex布局对齐方式
align-items: flex-end;/*右对齐*/
}
.rightnav div{
background-color: #1E90FF;
width: 50px;
color: white;
text-align: center;
padding: 5px 0;
margin-bottom: 1px;
}
.rightnav div:hover{/*⿏标进⼊时变换颜⾊和宽度*/
background-color: #ff404b;
width: 60px;
}
.rightnav a{
color: white;
text-decoration: none;
display: block;
}
display: flex ⽤于把容器指定为flex容器。
flex-direction 属性⽤于指定布局⽅向，默认是从左向右的横向布局，本例中指定为 column，表⽰把布局⽅向设置为从上到下。
align-items 属性⽤于指定元素边缘的对齐⽅式，在垂直布局情况下，flex-end 为元素右边对齐。这样在元素伸展开时，其右边是不动的。

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