響應式佈局實現的幾種方法 — 彈性佈局
響應式佈局的實現是前端工程中一個很是大的跨越，它很是靈活的可塑造性使得同一個網站能在不一樣的終端設備上展示出不一樣的活力。就今天這個機會，我想與你們分享並探討一些經常使用來實現響應式佈局方法中的彈性佈局。html
彈性佈局是一種十分方便的，只須要依賴於CSS樣式的實現響應式佈局的方式，也是K最多用到的一種實現響應式的方法。尤爲是如今相似於某寶、某東一類的電商web站或者手機app的頁面，利用彈性佈局是均可以很輕鬆的實現的，下面就是本K用彈性佈局copy的某動的手機應用的部分頁面。前端
你們能夠看到，特別是在小圖標排列或是頻繁劃區的時候，彈性佈局就顯得十分的便利。下面，K就帶你們來回顧一下關於彈性佈局（display:flex）。web
彈性佈局 flex 是CSS中 display 的一個屬性值，經過在父容器上添加 display:flex; 屬性，即可以實現其子元素在父元素中的彈性佈局，但要注意的是 display:flex; 這一條樣式只會做用在添加這一屬性的父容器和非隔代子容器上，換句話說，父容器上的 diaplay:flex; 屬性並不會使其直系子元素中的子元素產生彈性佈局。通俗來說，爹只能管獲得本身的兒子、而管不到本身的孫子。若是想要在下一層中繼續使用彈性佈局，咱們能夠在相應的子元素上再次添加 display:flex; 屬性來實現。app
彈性佈局在父、子元素上都有相對應的屬性來規範子元素在父元素中的「彈力」。佈局
在父元素上，咱們常常會用到的有關彈性佈局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個屬性分別從 主軸的方向、是否換行、項目在主軸上的對齊方式、項目在交叉軸上的對齊方式、項目在多根軸線上的對齊方式來規範了項目在父元素中的彈性。post
在子元素上，咱們常常會用到的有關彈性佈局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，這幾個屬性分別從 項目的排序、項目放大比例、項目縮小比例、項目佔據主軸空間、單個項目在交叉軸上的對齊方式來規範了項目自身的彈性。flex
以上幾種具體的屬性值及做用你們能夠在個人博客（http://www.cnblogs.com/wk1102/p/6622738.html）中找到，這裏給你們講一下我在當時感受到的比較疑惑的幾個地方。網站
（1）主軸與交叉軸。 在彈性佈局中，主軸及主軸的方向取決於 flex-direction 屬性的屬性值，它能夠是在水平方向上，也能夠是在垂直方向上，既能夠是正向，也能夠是反向，在這裏，初次接觸這一律唸的朋友們要注意了，千萬不要單單把「主軸」與「水平正向」劃等號，雖說在CSS中規定的默認值是這樣的。而交叉軸表示的就是與主軸垂直的那條軸線。url
（2）基線。在彈性佈局中，還提到了「基線」這個詞，基線是指字母x的下端沿。而許多屬性值所謂的baseline對齊方式就是指沿一行中小寫x的低端線對齊，就好像一直有那麼一個模板在比對者同樣。htm
（3）多交叉軸線。多交叉軸線是在flex-wrap屬性設置爲wrap後可能出現的一種狀況，即父容器中出現了多行的排列，而每一行都有其各自的軸線。
以上就是K對於實現響應式佈局中彈性佈局方法使用的一些小小的總結和看法，下一次，K會繼續跟你們探討關於實現響應式佈局的其餘幾種方法。