http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

任何一個(gè)元素都可以設(shè)定為 flex 布局容器

block, inline, inline-block ... 都可以設(shè)為容器
父級容器稱為 flex container. 子元素稱為 flex item
子元素的 float，clear，vertical-align 將失效

div {
    display: flex;
}

span {
    display: inline-flex;
}

父級容器的屬性

子元素排序方向（row 默認(rèn) / row-reverse / column / column-reverse）

.container {
    flex-direction: row;
}

子元素?fù)Q行（ nowrap 默認(rèn) / wrap / wrap-reverse ）

.container {
    flex-wrap: nowrap;
}

子元素排序方向，子元素?fù)Q行簡寫（默認(rèn) row nowrap ）

.container {
    flex-flow: row nowrap;
}

單行子元素水平方向?qū)R（ flex-start 默認(rèn) / flex-end / center / space-between / space-around ）

.container {
    justify-content: flex-start;
}

單行子元素垂直方向?qū)R（ flex-start 默認(rèn) / flex-end / center / baseline / stretch）

.container {
    align-items: flex-start;
}

多行子元素垂直方向?qū)R（ flex-start 默認(rèn) / flex-end / center / space-between / space-around / stretch ）

.container {
    align-content: space-between;
}

子級項(xiàng)目的屬性

子元素排序方向
數(shù)字順序決定排序

.item {
    order: 3;
}

子元素彈性放大
數(shù)字大小決定放大倍數(shù)

.item {
    flex-grow: 3;
}

子元素彈性收縮
數(shù)字大小決定縮小倍數(shù)
所有項(xiàng)目的 flex-shrink 默認(rèn)都為 1，當(dāng)空間不足時(shí)，都將等比例縮小
設(shè)定其中一個(gè)項(xiàng)目的 flex-shrink 為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者不縮小

.item {
    flex-shrink: 3;
}

主軸富余空間
在分配多余空間之前使用
默認(rèn) auto，可以設(shè)置像素值，讓子元素集合占據(jù)固定空間

.item {
    flex-basis: auto;
}

子元素復(fù)合寫法（彈性放大 / 彈性縮小 / 主軸富余空間）
該屬性有兩個(gè)快捷值：auto ( 1 1 auto ) 和 none ( 0 0 auto )
flex 是彈性放大，彈性縮小，主軸富余空間的簡寫，默認(rèn)值為0 1 auto，后兩個(gè)可選

.item {
    flex: auto;
}