JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

xuhong 發(fā)布于2019-08-30 15:55 / 2024人閱讀

摘要：前言春節(jié)假期有幸拜讀了張鑫旭大大的關于與的兩篇文章見參考文獻，很有收獲自己在開發(fā)的過程中，很多時候都會采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學習了，深感的好用與便利。相對于，它多出來一個的屬性，代表拉伸默認屬性。

前言

春節(jié)假期有幸拜讀了張鑫旭大大的關于Flex與Grid的兩篇文章（見參考文獻），很有收獲；自己在開發(fā)的過程中，很多時候都會采用Flex布局，而Float與inline-box這種方式已經(jīng)很少使用了；這次在春假期間學習了Grid，深感Grid的好用與便利。趁著這次機會總結一下Grid與Flex的使用。

瀏覽器支持

Flex 瀏覽器支持情況

Grid瀏覽器支持情況

可以看出來，相對于Grid來說，F(xiàn)lex無論實在PC端還是移動端都得到了很好的支持，而Grid，在移動端的支持還是差強人意。

FlexBox

在flex布局中，有兩個概念需要謹記：容器與元素。在一個html標簽中聲明樣式：display：flexordisplay：inline-flex即聲明了一個flex的容器，在這個容器里面的元素即為flex元素。而flex所有的樣式屬性分為兩類：容器屬性與元素屬性，他們均作用于flex元素，只不過flex容器中聲明的屬性統(tǒng)領flex所有元素整體顯示與排布方式，而flex元素的屬性表示單一元素的排布方式。

下面，根據(jù)上面腦圖的思路，依次介紹flex的屬性。
聲明：
下面師范的所有元素都遵從以下HTML結構和基本樣式

容器屬性 flex-direction

flex-direction顧名思義，是控制flex元素的整體布局方向的，它包括四個屬性：

1.row //從左到右 默認
2.row-reverse //從右到左
3.column //從上到下
4.column-reverse //從下到上

1、flex-direction:row

2.flex-direction:row-reverse

3.flex-direction:column

4.flex-direction: column-reverse

上面四個圖是分別在容器上（.container）設置flex-direction四個屬性得到的效果。

flex-wrap

flex-wrap是控制元素是換行顯示還是單行顯示，它共有三個屬性

1.no-wrap //不換行 默認
2.wrap // 換行
3.wrap-reverse //換行反序

為了更加明顯的看出區(qū)別，我特別添加了一個難看的邊框。
在容器屬性上添加flex-wrap,分別設置三個wrap屬性
1.flex-wrap: no-wrap

2.flex-wrap: wrap

3.flex-wrap: wrap-reverse

在這里需要注意no-wrap屬性：
如果容器元素設置了最小寬度，而且元素的最小寬度之和>父容器的寬度，則顯示內(nèi)容溢出。
如果容器元素沒有設置最小寬度或者最小寬度之和<父容器的寬度，則容器元素收縮并將父元素填滿，在上面no-wrap例子中，就沒有設置子元素的最小寬度，讀者可以自行添加驗證。

設置wrap-reverse屬性后，我們可以看到它的換行結果與wrap的換行結果在行這一維度上是相反的。

讀者可以試試將flex-direction設置為column或者其他非默認值，再查看在不同的flex-wrap值下的顯示，會有不同的結果喲。

flex-flow

flex-flow是 flex-direction與flex-wrap的統(tǒng)寫，語法是
flex-flow:<‘flex-direction’> || <‘flex-wrap’>

justify-content

justify-content控制flex元素水平方向的對齊方式，它共有個屬性：

1.flex-start // 默認值默認情況下左對齊
2.flex-end // 右對齊
3.center // 居中
下面以space開頭的屬性都是描述剩余空間的排布方式的
4.space-around //剩余空間圍繞在每個子元素的周圍
5.space-between //剩余空間只分布在子元素之間，兩端元素左右沒有剩余空間
6.space-evenly // 剩余空間均勻分布在元素兩端、之間

下面看例子：
1.flex-start

2.flex-end

3.center

4.space-between

5.space-around

6.space-evenly

為了更加明顯的看出不同space下的額外空間分布特點，我使用紅框框出每一屬性下的剩余元素。幾個屬性分布不同不言而喻了。

align-content

align-content與justify-content對應，代表元素垂直方向上的分布。而這種分布方式只有在多行的情況下才能夠凸顯出來，單行情況下設置此屬性無效。
相對于justify-content，它多出來一個stretch的屬性，代表拉伸,默認屬性。

1.stretch

2.flex-start

3.flex-end

4.space-between

5.space-around

6.space-evenly

可以看出，它的排布方式與justify-content的邏輯是一致的，只不過方向不同而已。

align-items

既然有了多行情況下控制元素排布方式，就會有單行情況下元素排布方式。align-items就是在單行情況下，控制元素排布方式的。共有5個屬性：
1.stretch 默認屬性，會將元素的高度拉伸至父容器的高度

2.flex-start 頂部對齊

3.flex-end 底部對齊

4.baseline 基線對齊

5.center 居中

注意：以上所有的例子展示都是在其他屬性默認情況的顯示情況，如果更改其他屬性(如：
flex-direction 與 flex-wrap)值，會有不同的顯示效果。

元素屬性 order

order屬性可以控制flex元素的排布順序，flex元素會根據(jù)order從小到大依次排布，order的默認值為0，因此如果想要某個元素排在前面，只需要將他的order值設為比0小的值即可。

flex-grow

flex-grow控制元素所占寬度，默認值為0，當容器內(nèi)有剩余空間時，flex-grow不為0的元素將會按照以下規(guī)則擴展：

容器中只有一個元素設置了flex-grow
1、flex-grow 值>=1 那么這個元素會填充容器的剩余空間

.container .item:first-child{
  order:2;
  flex-grow:1;
}

2、flex-grow 在0-1之間，那么這個元素會多占用空間為剩余空間乘以這個flex-grow的值。

.container .item:first-child{
  order:2;
  flex-grow:0.5;
}

.container{
  display:flex;
  justify-content:space-around;//如果子元素的flex-grow<1,此屬性依然有效
}

.container .item:first-child{
  order:2;
  flex-grow:0.5;
}

容器中有多個元素設置了flex-grow
1、所有元素的flex-grow的值之和>1
則占用全部的剩余空間，多占用的剩余空間比例即為各個元素所設置flex-grow的比例。
2、所有元素的flex-grow的值之和<1
所占用的剩余空間的比例即為各個元素的felx-grow的值的比例。

flex-shrink

flex-shrink的屬性與flex-grow相反，指的是當空間不足的時候，元素的收縮比例，默認值為1；其核心思路與grow一致，這里不再贅述，讀者可以自行檢驗。

flex-basis

flex-basis定義了在分配剩余空間之前，每個元素的默認寬度，默認為auto即元素的寬度；當flex-basis的值不為auto時，其顯示的優(yōu)先級是高于元素的width的。

flex

flex屬性為以上三個屬性的統(tǒng)稱，語法為：
flex: none | auto | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
flex翻譯為中文就是彈性的，所以這個屬性就是說明當有空間過大or空間不足時，每個元素如何分布。

align-self

align-self顧名思義，就是確定單個元素垂直分布狀態(tài)；其在父容器對應的屬性是algin-items；
其屬性值有align-items一致，只不過多了一個auto默認屬性，表示與父元素的auto-items值一致。
來看例子：

對應css代碼：

.container{
  display:flex;
  align-items:center;
}

.container .item:nth-child(2n+1){
  order:2;
  flex-grow:2;
  align-self:flex-start;
}

我在父元素上添加align-items屬性，使flex元素居中對齊，在子元素上添加align-self屬性，使奇數(shù)子元素向上對齊。

當有多行的情況下，但是align-content未設置，我們可以看到，每一個設置了align-self屬性的子元素會在當前的行按照align-self屬性顯示，但是當align-content屬性設置后，其align-self屬性失效（見下圖）。

對應代碼：

.container{
  display:flex;
  align-content:center;
  flex-wrap:wrap;
}

.container .item:nth-child(2n+1){
  order:2;
  flex-grow:2;
  align-self:flex-start;
}

總結

flex布局就總結到這里，里面有些類似屬性沒有舉例子，還需要讀者自己去驗證。相對于其他解決方案，flex布局更加簡潔，也更加具有語義性；最顯而易見的，可以很方便的解決我們平時面試過程中遇到的多欄布局，垂直居中問題。
其實細細品讀flex，相比于Grid而言，他還是更加線性化，就是把所有的元素都看成一條線，確定這條線的方向、居中垂直方式，當這條線超過父元素的范圍，我們怎樣處理。所以，雖然flex看似有許多屬性，但是合理的理解后，還是非常簡單的。

這篇是glex與Grid的上篇，主要介紹了flex，而Grid的相關屬性與應用，我們下篇見。

參考文獻

張鑫旭：寫給自己看的display: flex布局教程
阮一峰：Flex 布局教程

云服務器 GPU云服務器五十問 css與html的區(qū)別 html與css的區(qū)別公有云與私有云的對比

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/117388.html

JavaScript五十問——對比來說CSS的Grid與FlexBox（下篇）

摘要：語法如下是簡寫屬性，也可以分別定義行間隔和列間隔。語法如下屬性值得含義同這里不再過多說明，讀者可以自行驗證。前言在上篇——JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇），我介紹了Flex的屬性與使用，今天我們來總結一下Grid的具體使用方法，最后會結合Flex與Grid布局講一講二者的聯(lián)系與不同。需要注意得是，Grid布局與我們之前所熟悉的css布...

Moxmi 2019-08-30 15:55 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
Javascript五十問——從源頭細說Webpack與Gulp

摘要：前言與是目前圈子內(nèi)比較活躍的前端構建工具。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。打包后形成的文件出口。前言：Webpack 與 gulp是目前圈子內(nèi)比較活躍的前端構建工具。網(wǎng)上有很多二者比較的文章，面試中也會經(jīng)常遇到gulp，Webpack的區(qū)別這樣的問題。對于初學者來說，對這二...

lwx12525 2019-08-23 14:47 評論0 收藏0
Javascript 五十問——實現(xiàn)的繼承多種方式

摘要：組合繼承實現(xiàn)了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進。這也是為什么在子類構造函數(shù)中一定要顯示調(diào)用的原因。談到繼承，或者更廣義上的：一個對象可以使用另外一個對象的屬性或方法。實現(xiàn)起來無外乎有兩種方式：apply or call 改變this的作用域原型繼承改變__proto__指向，添加作用域鏈而JavaScript所有的繼承實現(xiàn)，都是圍繞以上兩點...

BlackHole1 2019-08-23 14:37 評論0 收藏0