小程序新增页面导航栏

display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

.navbar{background:white}:导航栏背景颜色为白色
 
.navbar .item:对导航栏中字体的设置,以及导航栏内元素空间如何分配
 
flex: auto:导航栏内元素空间弹性分配
 
flex:1    :导航栏内元素空间等分
 
{
position: relative;相对定位
 
position: absolute;绝对定位
例如先 relative 后absolute,则absolute的部分根据relative进行定位
}
 
.navbar .item.active:导航栏里的字体颜色
 
.navbar .item.active:after:选中导航栏中的某一栏是,这一栏下边界所显得颜色
原文地址:https://www.cnblogs.com/mitang0-0/p/11734546.html