弹性盒模型

Flexble Box

弹性容器（flex container）
弹性子元素（flex item）
主轴（main axis）、侧轴（cross axis）
弹性子元素排列起始位置：主轴开始（main start）、侧轴开始（cross start）
结束位置：主轴结束（main end）、侧轴结束(cross end)

属性

flex-direction
row
row-reverse
column
column-reverse

flex-wrap
设置弹性子元素超出弹性容器范围是否换行
rowrap不换行
wrap换行
wrap-reverse逆序换行
flex-flow
符合属性，设置子元素排序方式
flex-direction
flex-wrap
justify-content
flex-start
flex-end
center
space-between
space-around

align-items
弹性子元素在侧轴上的对齐方式

align-content
当侧轴有空白且有多行时，弹性子元素在侧轴上的对齐方式
stretch
flex-start
flex-end
center
space-between
space-around
order
integer
弹性子元素的顺序，数字小的排前面
flex-grow
number
扩展比例，不允许负值，默认值为0。根据比例分配剩余空间

flex-shrink
number
收缩比例

flex-basis
length
percentage
auto
伸缩基准值
flex
复合属性，分配弹性子元素的空间
none
flex-grow
flex-shrink
flex-basis
align-self
auto
flex-start
flex-end
center
baseline
stretch
弹性子元素在侧轴上的对齐方式，与align-item相同

实例

.menu{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;/*不换行*/
}
.menu li{
    height: 40px;
    text-align: center;
    line-height: 40px;
    flex:1 1 100%;/*收缩比例1，扩展比例1，最初宽度100%*/
}
.menu li:nth-child(1){
    background-color: yellow;
}
.menu li:nth-child(2){
    background-color:darkcyan;
}
.menu li:nth-child(3){
    background-color: goldenrod;
}
.menu li:nth-child(4){
    background-color: orchid;
}
.menu li:nth-child(5){
    background-color: paleturquoise;
}
.menu li:nth-child(6){
     background-color:pink;
 }
.menu li a{
    color: white;
    text-decoration: none;
}

@media (min-width: 480px) {
    .menu li{
        flex:1 1 50%;
    }

}

@media (min-width: 768px) {
    .menu {
        flex-flow: row nowrap;/*主轴方向水平，不换行*/
    }

}