複習到flex，總結一下方便檢視
以下6個屬性設定在容器上。
屬性描述
值flex-direction
決定主軸的方向（即專案的排列方向）。
row(預設值) , row-reverse , column , column-reverse
flex-wrap
定義如何換行。
nowrap(預設值), wrap , wrap-reverse
flex-flow
flex-direction 和 flex-wrap 的簡寫
row nowrap(預設值)
justify-content
定義主軸對齊方式
flex-start(預設值) , flex-end , center , space-between , space-around
align-items
定義交叉軸對齊方式
flex-start , flext-end , center , baseline , stretch(預設值)
align-content
存在兩條軸線時，定義交叉軸對齊方式，如果專案只有一根軸線，該屬性不起作用。
flex-start , flex-end , center , space-between , space-around , stretch(預設值)
以下6個專案設在在專案上
屬性描述
值order
定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow
定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
flex-shrink
定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
(負值無效)
flex-basis
在分配多餘空間之前，專案佔據的主軸空間
, auto
flex
flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選，快捷鍵：auto (1 1 auto) 和 none (0 0 auto)
none ，auto, [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]
aligh-self
允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
auto , flex-start , flex-end , center , baseline , stretch
flex布局簡單總結
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。注意 屬性名屬性值 備註display flex 定義了乙個flex容器，它的直接子元素會接受這個flex環境 flex direction row,row reverse,column,column r...
Flex布局常用屬性簡單總結
常用布局方式也就是float，但flex布局更適合移動端專案開發 參考flex布局 1，布局方式 display flex display webkit flex safari a.橫向縱向布局 flex direction row column row reverse row reverse b....
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...