詳細看下flex彈性布局具體屬性：
flex容器屬性詳解：
flex-direction：row/column；(橫排/豎排) 決定元素的排列方向；
flex-wrap：nowrap/wrap/wrap-reverse(翻轉)； 排列不下時如何排，預設排不下就壓縮進行排；
flex-flow是： flex-direction 和 flex-wrap的簡寫；（例如：flex-flow:row nowrap;）
justify-content：center； 元素在主軸上的對齊方式（center元素居中對齊）；
align-items 元素在交叉軸的對齊方式；
flex元素屬性詳解：
flex-grow 當有多餘空間時，元素的放大比例；
flex-shirink當空間不足時，元素的縮小比例；
flex-basis 元素在主軸上佔據的空間；
flex時grow / shrink / basis的簡寫；
order 定義元素的排列順序；
align-self 定義元素自身的對齊方式；
容器屬性：
1、flex-direction:row/column; //決定 flex 元素的排列方式：橫排/豎排（預設：row 橫排）
div.com12、justify-content:center/flex-start/flex-end/center/space-around;
center：左右居中對齊
flex-start：從左邊開始對齊；
flex-end：從右邊開始對齊；
space-around：在主軸的空間是一樣的；
space-between：進行兩端對齊
div.com1
div.com1
div.com1 //兩端對齊3、align-items：flex-start/flex-end/center；元素在交叉軸的對齊方式；
flex-start：從左邊開始對齊；
flex-end：從底部開始；
center：在交叉軸中間進行對齊；
stretch：當元素沒有設定高度的時候，設定 strtch 讓元素自動沾滿容器的高度；
baseline：讓元素裡面的文字，更具底線進行對齊；
flex元素屬性詳解：
1、flex-grow:1; 當有多餘空間的時候，元素的放大比例；預設是0：不放大；
（可以設定：當有多餘空間的時候，第二個佔據兩份）
2、flex-shrink:0/1/2;當空間不足的時候，元素的縮小比例；（0表示不壓縮，1表示等比壓縮，2表示當前元素被壓縮2份）
div.com1div.com1 div.item/*第三個不壓縮
3、flex-basis：元素在主軸上佔據的空間
div.com1div.com1 div.item/*第三個佔據 100px
4、order：定義元素的排序
5、align-self：定義元素自身的對齊方式；
6、flex：是grow shrink basis 的縮寫。例如：flex:1 2 25px;
Flex彈性布局 屬性總結（一）
傳統布局的核心是盒子模型，依賴display屬性 position屬性 float屬性。可以看出來傳統布局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合於文字排版。但是，對於垂直居中這樣一些布局，以及響應式開發，雖說可以實現，但是卻不夠效率。使用flex布局則有這些優勢 ...
關於Flex布局屬性詳解
一 flex布局是什麼？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首。box 注意，設為flex布局以後，子元素的f...
CSS display flex 彈性布局屬性
display flex 是一種布局方式。它即可以應用於容器中，也可以應用於行內元素。是w3c提出的一種新的方案，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以...