使用display:flex是css3的新特性，是乙個強大的布局神器。在傳統的布局中，通常使用浮動
float、position，雖然能很好進行布局，但自從接觸flex後，對前端的布局來說簡直就是一種解放。上圖為
flex在各瀏覽器和裝置上的相容性問題，可見除了ie瀏覽器外基本都支援了這一特性。不過即使這樣也不用擔心，還記得postcss的autoprefixer外掛程式嗎？結合webpack即可解決相容問題。
flex只需在父元素上定義display:flex,然後子級的所有元素都具有了flex功能。
index.html
class="box">
class="box-item">1div>
class="box-item">2div>
class="box-item">3div>
class="box-item">4div>
class="box-item">5div>
div>
複製**
.box
.box-item
複製**
.box以及子元素都具備了flex特性，可以通過相應特性進行個性化布局，接下來將逐一介紹每乙個特性。
flex術語圖示
flex的兩根軸
主軸水平方向
交叉軸垂直於主軸
這些屬性應用在父級元素上flex-direction
row設定主軸為水平（預設從左到右）
row-reverse設定主軸為水平（從右到左）
column設定主軸為垂直（預設從上到下）
column-reverse設定主軸為垂直（從下到上）
flex-wrap
nowrap不自動換行（預設）
wrap自動換行
wrap-reverse從下到上開始換行
flex-flow
是flex-direction和flex-wrap的簡寫屬性
justify-content
控制主軸的對齊方式
flex-start左對齊
flex-end右對齊
center居中
space-between兩端對齊
space-around使專案之間的間隔相等
align-items
控制單行交叉軸的對齊方式
flex-start左對齊
flex-end右對齊
center居中baseline基線對齊
stretch預設撐滿整個容器高度
align-content
控制多行交叉軸的對齊方式
flex-start左對齊
flex-end右對齊
center居中
space-between兩端對齊
space-around使專案之間的間隔相等
注意：如果垂直方向沒有設定高度，那麼align-items和align-content會失效
下面的幾個屬性是用於單個專案裡面align-self
覆蓋align-items而在單獨專案生效例子：align-self:flex-start;
order
改變專案位置，數值越小越靠前，可以是負數例子：order:-1;
flex-grow
設定放大比例（無單位）例子：flex-grow:2;
flex-shrink
設定當空間不足時的收縮比例（無單位）例子：flex-shrink:2;
flex-basis
設定初始大小（有單位）例子：flex-basis:20%;
flex
是flex-grow、flex-shrink、flex-basis的簡寫屬性
例子：flex:2 2;
參考文件
CSS3 伸縮布局 Flexbox
display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...
布局神器 Flexbox
最近的工作內容大多是移動端網頁的開發，百分比布局，media queries,bootstrap等常規的響應式 自適應的開發技術皆一一試過，但覺以上都不夠靈活，所以，一直再嘗試尋求更加靈活的精確的移動端網頁設計技術。尋求的過程中知道了兩個讓我眼前一亮的解決方案 乙個是flexbox 另外乙個是rem...
Flexbox 快速布局神器
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。flexbox通常能讓我們更好的操作它的子元素布局 注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元...