響應(yīng)式布局的實(shí)現(xiàn)是前端工程中一個(gè)非常大的跨越，它非常靈活的可塑造性使得同一個(gè)網(wǎng)站能在不同的終端設(shè)備上展現(xiàn)出不同的活力。就今天這個(gè)機(jī)會(huì)，我想與大家分享并探討一些常用來實(shí)現(xiàn)響應(yīng)式布局方法中的彈性布局。

彈性布局是一種十分方便的，只需要依賴于CSS樣式的實(shí)現(xiàn)響應(yīng)式布局的方式，也是廣州網(wǎng)站建化最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。尤其是現(xiàn)在類似于某寶、某東一類的電商web站或者手機(jī)app的頁面，利用彈性布局是都可以很輕松的實(shí)現(xiàn)的，下面就是本廣州網(wǎng)站建化用彈性布局copy的某動(dòng)的手機(jī)應(yīng)用的部分頁面。

大家可以看到，特別是在小圖標(biāo)排列或是頻繁劃區(qū)的時(shí)候，彈性布局就顯得十分的便利。下面，廣州網(wǎng)站建化就帶大家來回顧一下關(guān)于彈性布局（display:flex）。

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

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

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

在子元素上，我們經(jīng)常會(huì)用到的有關(guān)彈性布局的屬性主要有 order , flex-grow , flex-shrin廣州網(wǎng)站建化 ,flex-basis , align-self ，這幾個(gè)屬性分別從 項(xiàng)目的排序、項(xiàng)目放大比例、項(xiàng)目縮小比例、項(xiàng)目占據(jù)主軸空間、單個(gè)項(xiàng)目在交叉軸上的對齊方式來規(guī)范了項(xiàng)目自身的彈性。

這里給大家講一下我在當(dāng)時(shí)感覺到的比較疑惑的幾個(gè)地方。

（1）主軸與交叉軸。

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

（2）基線。

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

（3）多交叉軸線。

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

以上就是廣州網(wǎng)站建化對于實(shí)現(xiàn)響應(yīng)式布局中彈性布局方法使用的一些小小的總結(jié)和見解，下一次，廣州網(wǎng)站建化會(huì)繼續(xù)跟大家探討關(guān)于實(shí)現(xiàn)響應(yīng)式布局的其他幾種方法。