flex box
display: flex | inline-flex
定義了一個flex容器; 內(nèi)聯(lián)或塊取決于給定的值。它為所有直接的子元素提供了一個彈性環(huán)境。
.container{
dispaly: flex | inline-flex;
}
flex-direction: row | row-reverse | column | column-reverse
建立了主軸，從而定義了flex項目放置在flex容器中的方向。Flexbox是單向布局概念。將flex項目視為主要布置在水平行或垂直列中。
-
row瀏覽器中默認， 主軸方向 從左到右 默認不換行 -
row-reverse反轉(zhuǎn) row 排列 -
column側(cè)軸方向 從上到下 -
column-reverse反轉(zhuǎn) column 排列
.container{
flex-direction: row | row-reverse | column | column-reverse
}
flex-wrap: nowrap | wrap | wrap-reverse
默認情況下，flex項目將全部嘗試適合一行（默認情況下不換行）。你可以改變它，并允許項目根據(jù)需要用這個屬性進行換行。
-
nowrap默認 不換行(子元素可能會溢出) -
wrapflex項目將從上到下成多行（flex 子元素溢出的部分會被放置到下一行） -
wrap-reverse反轉(zhuǎn) wrap 排列
.container{
flex-wrap: nowrap | wrap | wrap-reverse
}
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
這是一個簡寫flex-direction和flex-wrap屬性，它們一起定義了flex容器的主軸和側(cè)軸。默認是row nowrap。
.container{
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
定義了沿主軸的對齊。當一條線上的所有flex項目都不靈活或靈活，但達到其最大尺寸時，它有助于分配剩余空間。當物品溢出時，它也對物品的排列起到一定的控制作用。
-
flex-start項目從flex盒子的起始位置排列 -
flex-end項目從flex盒子的結(jié)束位置排列 -
center項目沿著flex盒子向行中間對齊（沿主軸居中對齊） -
space-between項目均勻分布在行中; 第一項是在起始行，最后一行是最后一行 -
space-around物品均勻分布在線上，周圍有相同的空間。請注意，視覺上空間不相等，因為所有物品在兩側(cè)都有相同的空間。第一個項目將在容器邊緣有一個空間單位，但下一個項目之間有兩個空間單元，因為下一個項目有其自己的間距 -
space-evenly項目是分布式的，以便任何兩個項目之間的間距（以及到邊緣的空間）相等
.container{
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}
align-items: flex-start | flex-end | center | baseline | stretch
定義了flex項目沿當前行的側(cè)軸放置的默認行為。可以將其視為justify-content側(cè)軸（垂直于主軸）的版本。
-
flex-start項目側(cè)軸上邊沿對齊 -
flex-end項目側(cè)軸下邊沿對齊 -
center項目側(cè)軸居中 -
baseline項目基線對齊 -
stretch默認 拉伸填充容器
.container{
align-items: flex-start | flex-end | center | baseline | stretch
}
align-content: flex-start | flex-end | center | space-between | space-around | stretch
當側(cè)軸上有額外的空間時，這會將flex容器的按justify-content對齊，類似于如何在主軸內(nèi)對齊各個項目。
注意：只有一行是彈性項目時，此屬性不起作用
-
flex-start各行向flex容器的起始位置對齊 -
flex-end各行向flex容器的結(jié)束位置對齊 -
center各行向flex容器的中間對齊 -
space-between各行在flex容器中平均分布。如果剩余的空間是負數(shù)或flex容器中只有一行，該值等效于'flex-start'。在其它情況下，第一行的側(cè)軸起始邊界緊靠住flex容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住flex容器的側(cè)軸結(jié)束內(nèi)容邊界，剩余的行則按一定方式在flex窗口中排列，以保持兩兩之間的空間相等 -
space-around各行在flex容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負數(shù)或flex容器中只有一行，該值等效于'center'。在其它情況下，各行會按一定方式在flex容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最后一行后面的空間是其他空間的一半。 -
stretch拉伸填充容器
.container{
align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
order: <integer>
默認情況下，flex項目按源代碼順序排列。但是，該order屬性控制它們在flex容器中的顯示順序。
order屬性用于更改在主軸方向上排列順序。
order數(shù)值越小，排列越靠前，默認為0，可以為負數(shù)。
.item {
order: <integer>; /* default is 0 */
}
flex-grow:<number>
定義了Flex項目在必要時增長的能力。它接受作為比例的無單位價值。它規(guī)定了該項目應該占用的flex容器內(nèi)的可用空間量。
如果所有項目都flex-grow設置為1，則容器中剩余的空間將平均分配給所有子元素。如果其中一個元素的值為2，則剩余空間將占用其他空間的兩倍。
注意：負數(shù)無效, 為0時不伸縮
.item{
flex-grow: <number> /*default 0 */
}
flex-shrink: <number>
定義了flex項目在必要時收縮的能力。
注意：負數(shù)無效
.item{
flex-shrink: <number>; /* default 1 */
}
.container_8{
display: flex;
width: 300px;
}
.container_8 .flex_item{
width: 100px;
height: 100px;
}
.container_8 .flex_item:nth-child(1){
flex-shrink: 0;
}
.container_8 .flex_item:nth-child(2){
flex-shrink: 2;
}
.container_8 .flex_item:nth-child(3){
flex-shrink: 2;
}
.container_8 .flex_item:nth-child(4){
flex-shrink: 2;
}
上例中 shrink的總數(shù)值為 6 , .container_8 .flex_item:nth-child(1)的shrink值為0, 則其寬度為 100px。而其他三個元素的寬度為(300 - 100) / 6 * 2 = 66.67px
flex-basis: <length> | auto
這將在分配剩余空間之前定義元素的默認大小。它可以是一個長度（例如20％，5rem等）或關(guān)鍵字。該auto關(guān)鍵字的意思是“看看我的寬度或高度屬性”（暫時由main-size關(guān)鍵字完成，直到棄用）。該content關(guān)鍵字的意思是“它根據(jù)項目的內(nèi)容大小”,此關(guān)鍵字不能很好地支持，所以很難進行測試，并更難知道它的兄弟max-content，min-content和fit-content。
如果設置為0，則不會考慮內(nèi)容的額外空間。如果設置為auto，多余空間將根據(jù)其flex-grow值分配。
.item{
flex-basis: <length> | auto; /* default auto */
}
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
這是速記flex-grow, flex-shrink和flex-basis組合。第二個和第三個參數(shù)（flex-shrink和flex-basis）是可選的。默認是 0 1 auto。
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self: auto | flex-start | flex-end | center | baseline | stretch
允許align-items為各個flex項目覆蓋默認對齊方式（或由其指定的對齊方式).
請注意float，clear并且vertical-align對flex項目沒有影響。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
.container_11{
display: flex;
align-items: flex-start;
height: 150px;
}
.container_11 .flex_item{
width: 100px;
height: 100px;
}
.container_11 .flex_item:nth-child(1){
align-self: center
}
.container_11 .flex_item:nth-child(2){
align-self: flex-end;
}
by @shine(xiaoshaoqq@gmail.com)
date: 2018-03-06
參考：Flexbox完整指南
