學習基礎語法，可以根據demo裡面的**理解每乙個屬性和值。
css3 彈性框(flexible box 或 flexbox)，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當排布行為的布局方式。包含著彈性專案的父元素。通過設定
display屬性的值為flex或inline-flex來定義彈性容器。彈性容器的每個子元素都成為彈性專案。彈性容器直接包含的文字將包覆成匿名彈性專案。
每個彈性框布局包含兩個軸。彈性專案沿其依次排列的那根軸稱為主軸(main axis)。垂直於主軸的那根軸稱為側軸(cross axis)。
注意，設為flex布局以後，子元素的.containerfloat、clear和vertical-align屬性將失效。決定主軸的方向（即專案的排列方向）。這裡需要注意的是主軸（main axis）是可以變動的，不一定就是圖中的x軸。
demo-flex-direction.container
flex-wrap屬性定義，如果一條軸線排不下，如何換行。demo-flex-wrap.container
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。.containerjustify-content屬性定義了專案在主軸上的對齊方式。demo-justify-conten.container
align-items屬性定義專案在交叉軸上如何對齊。demo-align-items`.container `
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。demo-align-content`.box `
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。demo-order.item
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。dmeo-grow`.item `
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。demo-shrink.item
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。demo-basic`.item `
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。有兩個預設值auto (1 1 auto)，none（0 0 auto）`.item `demo-flex
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。demo-align-self`.item `sass flexbox 的相容方案
less flexbox 的相容方案
demo-case-flex 頂部導航
demo-case-holy-grail 聖杯布局
a complete guide to flexbox 乙份關於 flexbox 的指導。
阮一峰 flexbox 語法
flexbox 使用
移動端全相容的flexbox速成班 iusx團隊分享的
移動端開發小記 - flexbox **前端團隊分享的
flexbox 的一些解決方案
通過遊戲學習 flexbox
flexbox5min 學習flexbox 5分鐘。
flexplorer
less flexbox
inuitcss
extensible, scalable, sass-based, oocss framework for large and long-lasting ui projects.
spectre
lightweight, responsive and modern css framework for faster and extensible development.
文章同時發表在：
彈性布局FlexBox
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式 使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。許多設...
Flex Box 彈性布局
flex box 彈性布局 main axis main start main end main size cross axis cross start cross end cross size 6個容器的屬性 flex direction row 預設值 主軸為水平方向,起點在左端.row rev...
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...