flex布局應用

flex介紹

了解了flex布局之後,發現其功能非常強大.

當指定乙個div display: flex之後,裡面的子元素會按flex布局.常用的冊格,各種經典網頁布局,如上左右下,還有一些難搞的css,如內容不佔滿整頁時,footer會上移,而不是在頁面底部等等.

這些情況下使用flex可以輕鬆簡潔的實現.節約大量css篇幅

冊格

<
div 
class
="grids"
>
<
div 
class
="grid-4"
>
div>
<
div 
class
="grid-4"
>
div>
<
div 
class
="grid-4"
>
div>
div>

實現冊格以前如下

.grids.grid.grid-4

用flex後

.grids .grid

grids為父元素,指定flex布局.子元素的關鍵屬性 flex :1 1 0 ,平分剩餘空間.

flex屬性值是簡寫含三個值依次為 flex-grow flex-shrink flex-basis

1. flex-grow : 設為1,表示平分剩於空間

2. flex-shrink: 設為1,預設值 .表示空間不足時,將縮小自身

3. flex-basis: 預設值為auto,表示該專案所佔據的空間,可以設定和width,height屬性值一樣的值.

這三個屬性很關鍵,完全不明白屬性的含意,經過測試.意義如下:

定義乙個div 寬度為320px 它作為容器,使用flex布局

其下三個div作為子項.寬度為50px,60px,70px ,並且定義flex:1 1 0

那麼,320px - 50px - 60px - 70px = 140px .右邊橘紅色就是所謂的 "剩於空間"

可以理解為父元素減去子元素之後,還剩下的空間

在這三個div上設定flex-grow:1,它們將平分剩於空間平分之後,三個div的寬度變成 96.67px 106.67px 116.67px

flex-grow規定了如何分配"剩於空間",預設值為0,意為不分配.都為1時,平分剩於空間.

為何不是三分? 由圖可見剩於空間大小為 140px, 需要被這三個div平分.那麼每個div分得 140px / 3 = 46.67px

將這個數加到div的原本寬度上,就得出上圖的結果.例如第1個div平分剩於空間後寬度為 50px + 46.67px = 96.67px

冊格系統需要等分空間,這時用到了flex-basis屬性.它的預設值為auto.這個值會影響剩於空間的計算規則.

上圖計算結果就是預設值auto時的情況,剩於空間計算規則為,父容器寬度減去所有子容器寬度. 將這個值設為0時.

終於成了三等分.

flex-basis這個屬性的含意是,作為flex布局中的子元素(專案),它佔多少空間.為auto(預設值)時,div原本多大,就佔多大.

"剩於空間"的計算規則與此屬性相關,剩於空間由父元素減去所有子元素,而這個屬性可以規定子元素佔多少空間.在父元素空間一定的情況下,改變這個值,就改變了剩於空間的大小.

等分,其實是要等分父元素.所以將這個值設為0,即規定子元素不佔父元素空間.那麼剩於空間的大小就是整個父元素大小 320px.

由於屬性flex-grow:1規定子元素要等分剩於空間,那麼就等分了父元素. 320px / 3 =106.67px 如此,實現了冊格

所謂道生一一生二二生三三生萬物。由flex的基本屬性jiflex除了可以實現多個盒子自適應螢幕寬度以外，還可以處理某一行或一列的布局，如在一行上讓元素兩端對齊flex兩端對齊，千里之行始於足下，想要了解flex基本的屬性，請閱flex自適應布局。1 一對多布局一行對齊多列或者一列對多行...

如下圖，訂單列表裡的標題需求是地名1 地名2 現實情況可能有以下五種情況兩個地名都很短兩個地名都很長地名1很長，地名2很短地名1很短，地名2很長地名1和地名2差不多長看到上面的需求，我們自然而然能想到的就是使用flex布局先寫個demo html如下 div class wrap ...

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度高度甚至順序以最佳方式填充可用空間主要是為了適應所有型別的顯示裝置和螢幕大小作者星星 flex 是 flexible box 的縮寫，意為彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度高度甚至順序...