html5 编写盒子,html5盒子布局

盒子布局：

display:-webkit-box;　　过去

display:-webkit-flex;　　现在

display:flex;　　现在

开启朝向方式：

-webkit-box-orient:horizontal/vertical;　　横向/纵向　　过去

-webkit-flex-flow:row;　　现在

flex-flow:row;　　将来

盒子比重：

-webkit-box-flex:1;　　平分　　过去

-webkit-flex:1;　　现在

flex:1;　　将来

demo:

Hello APP

.navigator{

display: -webkit-box;

display:-webkit-flex;

display: flex;

-webkit-box-orient:horizontal;

-webkit-flex-flow:row;

flex-flow:row;

height:30px;

background-color: #e40681;

}

.navigator .menu{

-webkit-box-flex:1;

-webkit-flex:1;

flex:1;

height:30px;

color:#ddd;

line-height:30px;

text-align: center;

font-size:14px;

}

.navigator .menu.selected{

font-weight:bold;

color:#fff;

}

水果

食材

零食

牛奶

蔬菜

来源：https://www.cnblogs.com/magic-world/p/5217753.html