display: -webkit-flex 标识使用弹性布局
flex: num 占容器的比例
Flex等比划分
导航1 : Flex :1; 导航2 Flex: 2; ————> 导航1 占容器的1 /(1 + 2) 导航2 占容器的2 / (1 + 2)
Flex混合划分
导航1: 100px 导航2 : flex:2; 导航3: flex:1;
不定宽高的水平垂直居中
1: css
.css {
position: absolute
top: 50%;
left : 50%;
-webkit-transform: translate(-50%,-50%);
}
[Flexbox版] 不定宽高的水平垂直居中
2: Felx
.flex {
justify-content: center; //子元素水平居中
align-items: center; //子元素垂直居中
display: -webkit-flex;
}
Flex 新版布局 | Flex旧版布局
display : -webkit-flex display: -webkit-flex-box
-webkit-flex : 1 -webkit-flex-box:1;
justify-content:center; box-pack: center;
align-items:center; box-align: center;