響應式佈局之彈性佈局的介紹

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

　　彈性佈局是一種十分方便的，只需要依賴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 ，這幾個屬性分別從項目的排序、項目放大比例、項目縮小比例、項目佔據主軸空間、單一項目在交叉軸上的對齊方式來規範了項目本身的彈性。

　　以上幾種具體的屬性值及作用大家可以在我的博客（）中找到，這裡給大家講一下我在當時感覺到的比較疑惑的幾個地方。

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

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

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

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

以上是響應式佈局之彈性佈局的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！