display：flex | inline-flex
彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子有flex container（彈性容器）和flex item（彈性子元素）組成
flex-direction：指定了彈性子元素在父容器中的位置
row | row-reverse | column | column-reverse
justify-content 內容對齊屬性，將彈性項沿著彈性容器的主軸線（main axis）對其
語法：justify-content：flex-start|flex-end|center|space-between|space-around
align-items：設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式
語法：align-items:flex-start|flex-end|center|baseline|stretch
flex-wrap：指定彈性盒子的子元素換行方式。
nowrap：預設。彈性容器為單行，彈性子項可能會溢位容器。
wrap：彈性容器為多行。彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉wrap排列
align-content：用於修改flex-wrap屬性的行為。類似於align-items，但不是設定彈性子元素的對其，而是設定各個行的對齊
語法：align-content：flex-start|flex-end|center|space-between|space|around|stretch
完美居中：使用彈性盒子，只要設定 margin：auto，就可以是彈性子元素在兩上軸方向完全居中
CSS3布局神器 Flexbox
display flex是css3的新特性，是乙個強大的布局神器。在傳統的布局中，通常使用浮動float position，雖然能很好進行布局，但自從接觸flex後，對前端的布局來說簡直就是一種解放。上圖為flex在各瀏覽器和裝置上的相容性問題，可見除了ie瀏覽器外基本都支援了這一特性。不過即使這樣...
CSS3的伸縮布局
css3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用，使得開發人員一下子就過上了小康的生活。伸縮盒模型經歷了幾次演變，大致分為舊版伸縮布局 過渡伸縮布局 新版伸縮布局 同樣為了避免混淆，我們以學習新版伸縮布局為主 ...
CSS3 伸縮布局（一）
css3引入了一種新的布局模式 flexbox布局，即伸縮布局盒模型 flexible box 用來提供乙個更加有效的方式制定 調整和分布乙個容器裡專案布局，即使它們的大小是未知或者動態的，這裡簡稱為flex。flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保...