布局神器 Flexbox

最近的工作內容大多是移動端網頁的開發，百分比布局，media queries,bootstrap等常規的響應式/自適應的開發技術皆一一試過，但覺以上都不夠靈活，所以，一直再嘗試尋求更加靈活的精確的移動端網頁設計技術。

尋求的過程中知道了兩個讓我眼前一亮的解決方案：乙個是flexbox;另外乙個是rem。

讓我眼前一亮的是如下的功能：

利用工作完成之餘，在兩天的時間內對flexbox進行了一次全面的認識與實踐，越發喜愛這個神器。

1# 讓我們來認識下：什麼是flexbox?

能夠按照設定好的規則來排列容器內的專案，而不必去計算每乙個專案的寬度和邊距。甚至是在容器的大小發生改變的時候，都可以重新計算，以至於更符合預期的排版。不僅解放了計算器，而且更加優美的服務於響應式設計.

flex的字面意思是，伸縮性的、彎曲的，引申含義為可自由配置的、靈活的意思。css3中的flex屬性也是這麼理解，具有flex屬性的容器和容器內的專案都具有彈性計算的能力，以至於符合預定的規則

3#flexbox原理

乙個設有「display:flex」或「display:inline-flex」的元素是乙個伸縮容器，伸縮容器的子元素被稱為伸縮專案，這些子元素使用伸縮布局模型來排版。與布局計算偏向使用書寫模式方向的塊布局與行內布局不同，伸縮布局偏向使用伸縮流的方向。「flex-flow」的值決定了這些術語如何對應到物理方向（上／右／下／左）、物理軸（垂直／水平）、物理大小（寬度／高度）。

—來自 

4.1、display（應用於flex屬性）

4.2、flex-direction（流動布局的主軸方向） 

4.3、flex-wrap（流動布局的側軸方向） 

4.4、flex-flow（「flex-direction」和「flex-wrap」屬性的縮寫） 

row nowrap為其預設屬性值，分別表示flex-direction和flex-wrap屬性。

4.5、justify-content（主軸方向內容對齊方式） 

4.6、align-content（多個主軸沿側軸方向的內容堆疊對齊方式） 

4.7、align-items（側軸方向內容對齊方式） 

與justify-content類似，只是這裡的參考方向為側軸。

4.8、flex專案屬性3.1、order（排序） 

整數，預設為0，負無窮到正無窮。容器中的專案都是依order值從小到大排列，order值越大越就越在主軸方向的末尾。比如：

4.9、flex-grow（空白空間分配比例） 

大於0的正數值。

4.10、flex-shrink（專案空間分配比例） 

大於0的正數值。

4.11、flex-basis（專案的主軸方向長度） 

如果專案制定了實際長度，則此長度為主。否則為自動計算長度。預設為auto。

4.12、flex（flex-grow、flex-shrink和flex-basis三個屬性的簡寫） 

格式為：flex: none | [  ? ||  ]

4.13、align-self（專案在側軸方向的對齊方式） 

參考於容器的align-items（2.7）。

例項

高120px

高50px
高140px
高100px
高120px
高50px
高140px
高100px
左邊固定寬度為100px，這裡設定了高度為auto
右邊寬度自適應，並且左右兩個區域是等高的，這裡設定了高度為200px
左邊固定寬度為200px，這裡設定了高度為auto
中間寬度自適應，並且左右兩個區域是等高的，這裡設定了高度為200px
右邊固定寬度為200px，這裡設定了高度為auto

1/*2

*built by @kevin
3*2015/4/2
4*for learning flex
5*6*
7*相關解決方案8*/
91011*
1516
body
1920
.wrap 
2627
h332
3334
.demo
5152
.demo img
5859
6061
62/*
水平響應列表
*/63
64.demo-wrap
6970
/*水平響應式列表
*/71
72.demo1
8182
83/*
水平響應式列表底端對齊
*/84
85.demo2
9697
9899
/*多行響應式布局
*/100
101.demo3
116117
.demo3 .item
123124
/*左固定右自適應等高布局
*/125
126.demo4
131132
.demo4 .left
151152
.demo4 .right
165166
/*左右固定中間自適應寬度底部對齊布局
*/167
168.demo5
171172
.demo5 .left,.demo5 .right
181182
.demo5 .center
190191
192193
194.item
202203
.item1
206207
.item2
210211
.item3
214215
.item4
218219
220.demo6
228229
.demo6 img
232233
234235
236.demo
253254
.demo img

參考資料

Flexbox 快速布局神器

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。flexbox通常能讓我們更好的操作它的子元素布局 注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元...

CSS3布局神器 Flexbox

display flex是css3的新特性，是乙個強大的布局神器。在傳統的布局中，通常使用浮動float position，雖然能很好進行布局，但自從接觸flex後，對前端的布局來說簡直就是一種解放。上圖為flex在各瀏覽器和裝置上的相容性問題，可見除了ie瀏覽器外基本都支援了這一特性。不過即使這樣...

flexbox布局 Flexbox 布局實際用例

上篇文章介紹了 flexbox 的屬性與示例，本文再通過幾個 flex 布局的案例來體會 flex 布局的特性帶來的便利和問題 當我們給父容器設定 flex 屬性後，flex 容器會在容器內建立乙個新的flex 格式化上下文 formatting context 在這上下文中float clear將...