響應式布局實現的幾種方法 — 彈性布局

　　響應式布局的實現是前端工程中一個非常大的跨越，它非常靈活的可塑造性使得同一個網站能在不同的終端設備上展現出不同的活力。就今天這個機會，我想與大家分享並探討一些常用來實現響應式布局方法中的彈性布局。

　　彈性布局是一種十分方便的，只需要依賴於CSS樣式的實現響應式布局的方式，也是K最多用到的一種實現響應式的方法。尤其是現在類似於某寶、某東一類的電商web站或者手機app的頁面，利用彈性布局是都可以很輕松的實現的，下面就是本K用彈性布局copy的某動的手機應用的部分頁面。

　　大家可以看到，特別是在小圖標排列或是頻繁划區的時候，彈性布局就顯得十分的便利。下面，K就帶大家來回顧一下關於彈性布局（display:flex）。

　　彈性布局 flex 是CSS中 display 的一個屬性值，通過在父容器上添加 display:flex; 屬性，便可以實現其子元素在父元素中的彈性布局，但要注意的是 display:flex; 這一條樣式只會作用在添加這一屬性的父容器和非隔代子容器上，換句話說，父容器上的 diaplay:flex; 屬性並不會使其直系子元素中的子元素產生彈性布局。通俗來講，爹只能管得到自己的兒子、而管不到自己的孫子。如果想要在下一層中繼續使用彈性布局，我們可以在相應的子元素上再次添加 display:flex; 屬性來實現。

　　彈性布局在父、子元素上都有相對應的屬性來規范子元素在父元素中的“彈力”。

　　在父元素上，我們經常會用到的有關彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個屬性分別從 主軸的方向、是否換行、項目在主軸上的對齊方式、項目在交叉軸上的對齊方式、項目在多根軸線上的對齊方式來規范了項目在父元素中的彈性。

　　在子元素上，我們經常會用到的有關彈性布局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，這幾個屬性分別從 項目的排序、項目放大比例、項目縮小比例、項目占據主軸空間、單個項目在交叉軸上的對齊方式來規范了項目自身的彈性。

　　以上幾種具體的屬性值及作用大家可以在我的博客（http://www.cnblogs.com/wk1102/p/6622738.html）中找到，這里給大家講一下我在當時感覺到的比較疑惑的幾個地方。

　　（1）主軸與交叉軸。 在彈性布局中，主軸及主軸的方向取決於 flex-direction 屬性的屬性值，它可以是在水平方向上，也可以是在垂直方向上，既可以是正向，也可以是反向，在這里，初次接觸這一概念的朋友們要注意了，千萬不要單單把“主軸”與“水平正向”划等號，雖然說在CSS中規定的默認值是這樣的。而交叉軸表示的就是與主軸垂直的那條軸線。

　　（2）基線。在彈性布局中，還提到了“基線”這個詞，基線是指字母x的下端沿。而許多屬性值所謂的baseline對齊方式就是指沿一行中小寫x的低端線對齊，就好像一直有那么一個模板在比對者一樣。

　　（3）多交叉軸線。多交叉軸線是在flex-wrap屬性設置為wrap后可能出現的一種情況，即父容器中出現了多行的排列，而每一行都有其各自的軸線。

 

　　　以上就是K對於實現響應式布局中彈性布局方法使用的一些小小的總結和見解，下一次，K會繼續跟大家探討關於實現響應式布局的其他幾種方法。