響應(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)式布局的方式，也是K最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。尤其是現(xiàn)在類似于某寶、某東一類的電商web站或者手機(jī)app的頁面，利用彈性布局是都可以很輕松的實(shí)現(xiàn)的，下面就是本K用彈性布局copy的某動(dòng)的手機(jī)應(yīng)用的部分頁面。

大家可以看到，特別是在小圖標(biāo)排列或是頻繁劃區(qū)的時(shí)候，彈性布局就顯得十分的便利。下面，K就帶大家來回顧一下關(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)。

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

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

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

以上幾種具體的屬性值及作用大家可以在我的博客()中找到，這里給大家講一下我在當(dāng)時(shí)感覺到的比較疑惑的幾個(gè)地方。

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的php响应式布局,响应式布局之弹性布局的介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。