一轉眼已經2018年，前端行業也風風雨雨的走過了10多年，網頁佈局也從最原始的文件變成成了當前精彩紛呈的互動。當我看到第四代css佈局技術網格佈局的時候，就像我看到無數女子一樣的的反應，這個妞兒好像在哪見過，我們是不是發生過點啥或者該發生點啥？
知道過去能更好的指導我們未來的技術學習，畢竟太陽底下沒有新鮮事，就像我看到最新的網格佈局聯想起曾經的初代table佈局樣，一切都變了，一切好像都是重新來過。
那是2006年的第一場雪，比2005年來的更早一些，那時候我還是一個風度翩翩玉樹臨風的少年，那一年每一個開發者的電腦上還都裝著一個frontpage，那一年我還能被早已經被扔入垃圾堆的dreamwaver8 驚豔到，那一年那個小蝌蚪（dreamwaver8的圖示是一個倒著寫的6，好吧，我一直以為他像一個小蝌蚪）伴隨了我大半個青春……
2006年註定是一個不平凡的一年，那一年微軟判了fontpage死刑，那一年XMLHttpRequest被W3C正式納入標準 ，那一年穀歌最性感的妞兒gmail已經兩歲了，重點是曾經統治PC網站90%以上的jquery 被 John Resig釋出了jQuery ，js一哥橫空出世，從此，前端工程師這個讓大量人榮耀與惆悵的職業如雨後春筍般成長起來，直到現在依然火爆，當然還有dreamwaver 8 釋出了。
一切都那麼美好，除了讓人噁心的初代table佈局。
初代table佈局
正如table的最早使用者所說，我把炸醬和麵倒在一起，並且沒法分開他。翻譯成人話就是，隨著業務的越來越複雜，做好的網頁你想改就是扯淡的事兒，特別難改。
然後第二代佈局css+div佈局登場了，
準確的說這玩意10幾年前就有了，但是現在才長成大姑娘，然後一出世就完全寵愛於一身，直接把table佈局打入冷宮了。從此正式開啟了div+css時代。
這貨火起來是有原因的，應為靈活修改，如果說table佈局是半永久紋眉的話，div+css佈局就是畫眉，想怎麼變就怎麼變，還不用削骨（動DOM）,當然目前這貨也是很主流的,但是我覺得css這貨也不是沒啥缺點，個人覺得這破玩意對非程式設計師太複雜了，即使對於程式設計師也太磨嘰了，一個一個元素去控制，就跟一個女孩要化妝，尼瑪呀有20只眉筆，三十色口紅，怎麼配合？太麻煩了……
要是啪啪啪，有個貼膜多好，網上一貼眉毛就畫好了，再啪啪啪一貼，臉蛋紅潤了。別讓我一筆筆的描，一下一下的鋪粉底弄什麼腮紅。
是的你懂得，因為css佈局的墨跡，尤其是float佈局各種清除浮動之類的東西，就跟挖完鼻屎得擦一個道理，真噁心。
基於這些噁心的問題，css，（放心目前就這哥們一統江湖了，沒有別的什麼玩意，這點我還是很欣慰的，不像html 嘗試搞什麼XHTML2.0什麼html5,js更過分，搞什麼typescript什麼的）一拍大腿，什麼float什麼嘛，什麼噁心人的位置寬高物體水平垂直居中，什麼float元素內部元素居中，這都啥噁心不垃圾的玩意啊，哥有更簡單的方法解決你，
第三代網路佈局系統flex。
flex的應用有兩個簡單到讓人髮指的地方
第一個，元素垂直水平居中。
看這裡，看這裡，瞅哪呢，看圖!
大家看 網易雲音樂APP 用css佈局實現，如果傳統的左右圖示 分別float向兩側，那麼中間三個元素圖示等距居中是一個問題，給寬度或者不給寬度都不好處理，如果我們使用絕對定位，不僅考慮絕對定位不佔空間，我們需要佔位，又涉及到左邊間距和垂直間距的處理，要保證不同解析度螢幕下永遠水平垂直都在那個位置就必須使用 rem佈局+js動態計算，rem又要考慮視網膜屏，大家心裡想罵娘了，我特麼就想讓幾個圖示垂直居中，水平有間距，每一個螢幕上一樣。怎麼特麼那麼費事。還好我們有flex佈局。
#toolbar{
display: flex;
align-items: center;
justify-content: space-between;
}好了，兩個圖示規規矩矩的各自靠邊佔了。
#iconTool {
display: flex;
justify-content: center;
}沒毛病，中間部分規規矩中分了。
不用學很多沒用的東西大家就記住父元素，
#toolbar{
display: flex;
align-items: center;//這個負責縱向居中
justify-content: space-between;//這個負責橫向居中或者兩邊站
}我想讓#iconTool 佔滿除了兩個圖示之外的空間咋辦，
flex-grow:1;有同學會說老師為啥不用
flex:1;你用個屁用啊，你就是想太多了，flex裡面包含flex-grow、flex-shrink、flex-basis ，你想把自己搞暈嗎？
別整沒用的，就記住剛才那兩個貨，你flex佈局大部分問題都解決了，不會你再google,別動不動就想大而全的學東西，到時候啥都不會。
第二個，“豆腐塊”佈局。
直接看圖!
大家看我紅圈圈起來的部分，基本上每一個app都用，但是大家知道的，有時候可惡心了，有時候左邊右邊間距不一樣了，或者左邊右邊要邊，中間又只要一個邊，而不是兩個邊，用first-child 和last-child 選擇器還要考慮相容。另外還要使用box-sizing,裡面的圖片不同裝置寬高比例又不對了，反正怎麼搞都特麼不爽。還得圖片跟文字也得居中，老師想想就得包很多層，是不是還得用dl dd，別想太多，看我怎麼做。現在我就告訴你一個好方法解放軍叔叔來了，大家看我怎麼搞，其實簡單的又讓人髮指了。我已最上面的今日推薦部分舉例
#recommend-items {
display: flex;
justify-content: space-around;//橫向子元素排列方式，不用記住，用的時候試試就OK
border-bottom: 1px solid #eee;
}
#recommend-items .item {
flex-grow: 1;
text-align: center;
display: flex;
flex-direction: column;//子元素縱向排列
align-items: center;
justify-content: center;
height: 0.93rem;
}別瞅了，看我生活不要太美好，這樣就鳥了，你覺得這樣就夠了嗎？顯然不是，
牛掰666的第四代網格佈局系統來了。
有同學說老師這個不挺好嗎？好，你一定要記住，沒有無緣無故的愛也沒有無緣無故的恨。翻譯成技術的話就是，沒有問題就不會有解決方案。技術是為解決問題服務的，flex佈局肯定變成慫蛋才會發明更牛掰的玩意。我們看這樣一種情況:
大家看這麼個破玩意，這個是手機淘寶APP裡面的一個佈局，別看妹子，看我，我不想墨跡我們們看看flex怎麼實現，你不是牛掰麼，看程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大彬哥666</title>
<style>
/** 實戰版 **/
.flex-item {
background: #f55;
text-align: center;
vertical-align: middle;
}
.wrap-box {
display: flex;
width: 500px;
border: 1px solid #abc;
margin-bottom: 10px;
margin-left: 10px;
}
.flex-inner {
display: flex;
flex-grow: 1;
}
.flex-item {
flex-grow: 1;
font-size: 0;
position: relative;
}
.wrap-6 {
/* -webkit-box-orient: horizontal; */
}
.wrap-6 .flex-inner {
display: flex;
flex-direction: column;
}
.wrap-6 .flex-inner:first-child {
width: 66.6%;
}
.wrap-6 .flex-inner:last-child {
width: 33.3%;
}
.wrap-6 .flex-item {
padding-top: 100%;
}
.wrap-6 .flex-box2 .flex-item {
padding-top: 50%;
}
.wrap-6 .flex-box2 {
display: flex;
}
.wrap-6 .flex-inner:first-child,
.wrap-6 .flex-box2 .flex-item:first-child {
margin-right: 1px;
}
.wrap-6 .flex-box1,
.wrap-6 .flex-inner:last-child .flex-item:first-child,
.wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {
margin-bottom: 1px;
}
img {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="wrap-box wrap-6">
<div class="flex-inner">
<div class="flex-box1 flex-item">
<img src="img/1.jpg" alt="">
</div>
<div class="flex-box2">
<div class="flex-item">
<img src="img/2.jpg" alt="">
</div>
<div class="flex-item">
<img src="img/3.jpg" alt="">
</div>
</div>
</div>
<div class="flex-inner">
<div class="flex-item">
<img src="img/4.jpg" alt="">
</div>
<div class="flex-item">
<img src="img/5.jpg" alt="">
</div>
<div class="flex-item">
<img src="img/6.jpg" alt="">
</div>
</div>
</div>
</body>
</html>老實說，如果讓一些前端開發者 在用flex實現這個佈局和聞大彬哥的香之間做個選擇的話，很多開發者估計會
痛快的說願聞其詳，因為不聞的話，自己可能卡出香來。
不是flex 慫蛋，是因為人家就是和一維的佈局，二維就廢了。翻譯成人話就是flex佈局適合一個方向佈局，同時要搞橫向和縱向就搞不動了。有些人說flex佈局和網格佈局還有一個內容優先和佈局優先的問題，這裡我就要忍不住吐槽了，我們學技術是為了應用到工作中，因為沒有工作你吃啥，沒有工作了你穿啥，吃穿都沒了你還臭嘚瑟啥？你知道不知道內容優先和佈局優先對能夠更快更好的佈局完活兒沒有半毛錢關係，程式設計師頭髮已經夠少了，少學點沒用的東西。
那麼就開始看看第四代網路佈局神奇grid佈局的強大之處。
網上有些文章類似於5分鐘學會 CSS Grid 佈局之類的文章，這些文章入門挺好的但是要想看完這個文章5分鐘就能夠工作中用還是有點費勁的。我又不是大自然的搬運工，能搜到的東西我就不講了，我們們不墨跡直接就上來一梭子程式碼看看剛才的實際手淘佈局怎麼實現。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
width: 500px;
height: 500px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 1px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
img{
width: 100%;
max-height: 100%;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style="background: red">
<img src="img/1.jpg" alt="">
</div>
<div class="item2" style="background: orange">
<img src="img/1.jpg" alt="">
</div>
<div class="item3" style="background: yellow">
<img src="img/1.jpg" alt="">
</div>
<div class="item4" style="background: green">
<img src="img/1.jpg" alt="">
</div>
<div class="item5" style="background: aqua">
<img src="img/1.jpg" alt="">
</div>
<div class="item6" style="background: blue">
<img src="img/1.jpg" alt="">
</div>
</div>
</body>
</html>有同學說 老師你不講講這玩意，
只講兩點，第一點
.wrapper {
display: grid;
width: 500px;
height: 500px;
grid-template-columns: 1fr 1fr 1fr;//你把他理解成跟畫素一樣的單位
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 1px;
}
.item1 {
grid-column: 1 / 3;//這裡不是三分之一 是第一條線到第三條線
grid-row: 1 / 3;
}第二點，他很簡單千萬別想太複雜說什麼我要好好學學，系統學學，學你妹啊，拿起來就用別有點新東西就事兒事兒的想大塊時間學，到最後也沒學，別想了，拿起鍵盤就是幹就對了。
這裡有同學會說，老師你瞎忽悠，flex和grid都是新技術，他們沒有辦法誰替代誰。
首先我告訴你，你說的沒錯甚至table佈局是初代佈局系統也有商榷，因為有人覺得從第一個網頁出來那個是第一代。我想說的是不管怎麼分，你能說的很有道理就行，有自己思考在裡面就行，別跟別人屁股後面人家說啥你跟著跑，對了內個詞兒叫人云亦云就行。而第四代佈局系統也是我總結出來的為什麼他是第四代，而flex是第三代呢？
原因：
1.flex對標的是float，本質上還是一維佈局，這就跟別人開著夏利，你開賓士都是地面上跑沒啥本質區別一樣。但是grid升維了，grid是飛機，在地面馬路這條線一維之上讓人能夠思考高度這個維度，以前是汽車一維交通工具（你只只能在水平方向的人一個方向開），飛機是二維（能俯衝了（橫向、縱向同時）），所以grid可以說是拓寬了css佈局的維度，不排除將來會有三維佈局的出現，不僅僅能css控制 橫向佈局，縱向佈局，還可以深度佈局（這個要依賴於三維展示的出現，如VR，AR三維立體的展示裝置出現）。
2.grid佈局裡面採用了“視覺化佈局（template部分，所見即所得）”，這個顛覆了傳統的，寫一句程式碼刷一下瀏覽器這樣的開發方式，不排除以後會出現程式碼即效果的開發模式。比如你再一個裝置上畫一個區域，然後畫輪播圖，
類似於vc++控制元件但是更智慧，更友好的方式。誰說不可能呢，大家不要忘了grid佈局的來源是早就廢棄的table佈局。說到這裡我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最後html5的canvas火了，連CSS3網格佈局是由微軟建立的一個模組 ，最後火起來居然沒人認識他。心疼我軟一秒鐘。
好了，不瞎逼逼了，總結一下，通過本文你應該學會一下幾個東西。
1.瞭解網格佈局的發展歷史，以便對未來佈局技術的發展有一個客觀的判斷正確的選擇是否學習。
2.學會使用flex佈局寫實際專案，而不是光就記住幾個屬性。
3.學會使用grid佈局寫實際專案，而不是說我找時間研究研究。
4.如果覺得文章寫的好，記得在評論區留言或點贊，因為信彬哥，原地滿血復活，最主要是真特麼的能漲工資。