Flexbox弹性布局
.nav {
overflow: hidden;
background-color: #DE7C3C;
padding: 10px;
display: -webkit-flex;
}
.item {
color: #FDDFA7;
padding: 0 5px;
text-align: center;
flex: 1;
}
Flex混合划分
另外有一个常见的问题：不定宽高的水平垂直居中
css3的解决方式是：
.myoff-wrapper {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
webkit-transform: translate(-50%, -50%);
}
flexbox版：
.parent {
justify-content: center; //子元素水平居中
align-items: center; //子元素垂直居中
display: -webkit-flex;
}
Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
网友评论