用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; /*垂直排列*/
    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 为元素右边对齐。这样在元素伸展开时，其右边是不动的。