你不該該只知道flex佈局

前言

我能夠說是長沙前端羣最閒的人了，加了不少個長沙不收費的前端羣，即可以吸收別人出現的問題和解決方案來擴充本身知識，同時也可以在幫助解決別人問題上盡本身一份薄力。見過幾回問佈局的，而羣裏齊刷刷的都回答flex佈局，沒有任何一個其餘的佈局，不知道是確實只知道flex佈局仍是知道其餘的佈局懶的說。 誠然，flex佈局真的很好用，可是咱們也應該要了解了解其餘方面的佈局。本文僅簡述除flex外其餘兩種少見的佈局和基本使用方法。

flex

面試前不是很自信的前端都會找一些面試題來爲本身充充電，其中一個至關經典的問題就是垂直居中問題。百度一下不少答案，最多見的幾個答案無非就是負margin,transform,設置成行內元素而後lineHeight,flex等等。不知道你們發現沒有，這些方法中不是須要知道子容器的寬高(負margin,transform)就是不能真正意義上的垂直(設置lineHeight),常見垂直居中佈局中只有flex既不須要關心父容器的寬高又不須要關心子容器的寬高就能垂直居中了，這確實很驚豔並且代碼量不多，同時flex還有其餘不少很高效的用法，深得咱們前端喜好。可是，我說可是了，這基本上是深得移動端的開發的喜好。做爲常年開發PC端的我來講並非常用flex,flex只兼容ie10以上的瀏覽器(最大痛點),並且老版的flex的寫法還不同，一下子display:box,一下子display:flex,還要作兼容處理。有沒有其餘佈局既可以有flex佈局的基本能力有能兼容老瀏覽器呢？有！

table

display:table這個table佈局就厲害了（用法涉及到不少api,請自行百度）。首先好久好久之前能用table佈局，兼容性是ie8及以上，ie8往下如今的份額應該能夠忽略不計了吧，其次就是table佈局下對容器寬高變化敏感，簡單點說就是具備彈性，響應padding屬性內容溢出時會自動撐開父元素，幾乎具備flex的基本功能（畢竟年代久遠，不可能作到比flex還優秀），下面就來幾個實例

• 垂直居中實例，如同flex通常絲滑
• 傳統聖盃佈局,兩欄佈局能夠同時參考
• 神奇等高佈局,適合數據如table展現的場景
• 動態頁腳,適合公司官網展示

以上應該是最多見的幾種table佈局了。缺點也很明顯，使用table了，那麼它的容器下的橫向排列總會是等高的，這就至關尷尬了。還有就是不少api還須要結合html的table標籤進行理解，比較費時。也許這也是它不可以好好流行下去的緣由吧。

grid

display:grid我複製一段阮一峯大佬的原話：Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，能夠看做是一維佈局。Grid 佈局則是將容器劃分紅"行"和"列"，產生單元格，而後指定"項目所在"的單元格，能夠看做是二維佈局。Grid 佈局遠比 Flex 佈局強大。,有多牛掰我就很少說了，api實在太多了，我來稍微總結一下：

• 總體佈局樣式： grid-template-columns grid-template-rows,決定了整個grid佈局橫縱的網格數和對應比例。
• 佈局間隔：grid-row-gap，grid-column-gap，grid-gap，這三個屬性其實就是決定了看不見的網格邊線的寬度。
• 佈局流向：grid-auto-flow。默認值是row，即"先行後列"。也能夠將它設成column，變成"先列後行"。和flex的流向的概念差很少。
• 對齊屬性：justify-items，align-items，place-items,justify-content，align-content，place-content。items結尾的就是對單元格內的元素進行對齊排列組合，content結尾的就是對grid內全部網格做爲一個總體的對齊排列組合。這裏屬性不少很複雜，是一個學習難點
• 重點-網格item的屬性：grid-column-start：左邊框所在的垂直網格線。grid-column-end：右邊框所在的垂直網格線。grid-row-start：上邊框所在的水平網格線。grid-row-end：下邊框所在的水平網格線。注意，最左邊或最上邊的網格線編號爲1而不是0。有了這幾個屬性，就能夠在網格內任務排列本身想要的佈局。
• 流動性：grid-auto-flow: row dense;column dense,自動填充網格。能夠在例子中去掉屬性看效果

下面是幾種常見的用法：

• 垂直居中
• 聖盃佈局
• 響應式佈局
• 常見用法

grid佈局基本上能夠用來作任何的佈局，缺點也很明顯，就是兼容性。

float 和 absolute

這兩種佈局也是最最經常使用的了，可是面對佈局問題，彷佛不少人不會第一想到這兩個最強兼容性最廣泛使用的佈局。

總結

對一個頁面進行佈局每每是一個僞命題，你能夠經過各類各樣的css搭配來實現你的目的。做爲最流行的flex確實受到了不少人的重用，可是嚴謹的前端工程師，咱們應該在佈局前慎重考慮後再選擇本身的佈局方法和手段，畢竟flex不是萬能的。

---

原文連接：tech.gtxlab.com/n_flex.html

*做者簡介： 張栓，人和將來大數據前端工程師，專一於 html/css/js 的學習與開發