完全摘自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
只作為自己快速查看之用七婴。
具體寫(xiě)法見(jiàn)http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"羽嫡，用來(lái)為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局肩袍。
.box{
display: flex;
}
行內(nèi)元素也可以使用Flex布局杭棵。
.box{
display: inline-flex;
}
一.以下6個(gè)屬性設(shè)置在容器上。
1.flex-direction 屬性決定主軸的方向（即項(xiàng)目的排列方向）氛赐。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
2.flex-wrap 屬性定義，如果一條軸線排不下艰管，如何換行滓侍。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
3.flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap牲芋。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式夕冲。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
5.align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
6.align-content 屬性定義了多根軸線的對(duì)齊方式裂逐。如果項(xiàng)目只有一根軸線歹鱼，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
二.以下6個(gè)屬性設(shè)置在項(xiàng)目上卜高。
1.order屬性定義項(xiàng)目的排列順序弥姻。數(shù)值越小南片，排列越靠前，默認(rèn)為0庭敦。
.item {
order: <integer>;
}
2.flex-grow屬性定義項(xiàng)目的放大比例疼进，默認(rèn)為0，即如果存在剩余空間螺捐，也不放大颠悬。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）定血。如果一個(gè)項(xiàng)目的flex-grow屬性為2赔癌，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍澜沟。
3.flex-shrink屬性定義了項(xiàng)目的縮小比例灾票，默認(rèn)為1，即如果空間不足茫虽，該項(xiàng)目將縮小刊苍。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)濒析，都將等比例縮小正什。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1号杏，則空間不足時(shí)婴氮，前者不縮小。
4.flex-basis屬性定義了在分配多余空間之前盾致，項(xiàng)目占據(jù)的主軸空間（main size）主经。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間庭惜。它的默認(rèn)值為auto罩驻，即項(xiàng)目的本來(lái)大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
5.flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)护赊，默認(rèn)值為0 1 auto惠遏。后兩個(gè)屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)骏啰。
建議優(yōu)先使用這個(gè)屬性爽哎，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值器一。
6.align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式课锌，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性渺贤，如果沒(méi)有父元素雏胃，則等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
