Flex box 弹性盒子布局

display: -webkit-flex 标识使用弹性布局

flex: num  占容器的比例

 

Flex等比划分

导航1 : Flex :1;  导航2  Flex: 2;     ————>   导航1 占容器的1 /(1 + 2)  导航2 占容器的2 / (1 + 2)

 

Flex混合划分

导航1: width: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;