摘要：一切都那么美好，除了讓人惡心的初代布局。第二個，豆腐塊布局。那么就開始看看第四代網(wǎng)絡(luò)布局神奇布局的強大之處。

一轉(zhuǎn)眼已經(jīng)2018年，前端行業(yè)也風(fēng)風(fēng)雨雨的走過了10多年，網(wǎng)頁布局也從最原始的文檔變成成了當(dāng)前精彩紛呈的交互。當(dāng)我看到第四代css布局技術(shù)網(wǎng)格布局的時候，就像我看到無數(shù)女子一樣的的反應(yīng)，這個妞兒好像在哪見過，我們是不是發(fā)生過點啥或者該發(fā)生點啥？

知道過去能更好的指導(dǎo)我們未來的技術(shù)學(xué)習(xí)，畢竟太陽底下沒有新鮮事，就像我看到最新的網(wǎng)格布局聯(lián)想起曾經(jīng)的初代table布局樣，一切都變了，一切好像都是重新來過。

那是2006年的第一場雪，比2005年來的更早一些，那時候我還是一個風(fēng)度翩翩玉樹臨風(fēng)的少年，那一年每一個開發(fā)者的電腦上還都裝著一個frontpage，那一年我還能被早已經(jīng)被扔入垃圾堆的dreamwaver8 驚艷到，那一年那個小蝌蚪（dreamwaver8的圖標(biāo)是一個倒著寫的6，好吧，我一直以為他像一個小蝌蚪）伴隨了我大半個青春……

2006年注定是一個不平凡的一年，那一年微軟判了fontpage死刑，那一年XMLHttpRequest被W3C正式納入標(biāo)準(zhǔn) ，那一年谷歌最性感的妞兒gmail已經(jīng)兩歲了，重點是曾經(jīng)統(tǒng)治PC網(wǎng)站90%以上的jquery 被 John Resig發(fā)布了jQuery ，js一哥橫空出世，從此，前端工程師這個讓大量人榮耀與惆悵的職業(yè)如雨后春筍般成長起來，直到現(xiàn)在依然火爆，當(dāng)然還有dreamwaver 8 發(fā)布了。

一切都那么美好，除了讓人惡心的初代table布局。

正如table的最早使用者所說，我把炸醬和面倒在一起，并且沒法分開他。翻譯成人話就是，隨著業(yè)務(wù)的越來越復(fù)雜，做好的網(wǎng)頁你想改就是扯淡的事兒，特別難改。

準(zhǔn)確的說這玩意10幾年前就有了，但是現(xiàn)在才長成大姑娘，然后一出世就完全寵愛于一身，直接把table布局打入冷宮了。從此正式開啟了div+css時代。

這貨火起來是有原因的，應(yīng)為靈活修改，如果說table布局是半永久紋眉的話，div+css布局就是畫眉，想怎么變就怎么變，還不用削骨（動DOM）,當(dāng)然目前這貨也是很主流的,但是我覺得css這貨也不是沒啥缺點，個人覺得這破玩意對非程序員太復(fù)雜了，即使對于程序員也太磨嘰了，一個一個元素去控制，就跟一個女孩要化妝，尼瑪呀有20只眉筆，三十色口紅，怎么配合？太麻煩了……

要是啪啪啪，有個貼膜多好，網(wǎng)上一貼眉毛就畫好了，再啪啪啪一貼，臉蛋紅潤了。別讓我一筆筆的描，一下一下的鋪粉底弄什么腮紅。

是的你懂得，因為css布局的墨跡，尤其是float布局各種清除浮動之類的東西，就跟挖完鼻屎得擦一個道理，真惡心。

基于這些惡心的問題，css，（放心目前就這哥們一統(tǒng)江湖了，沒有別的什么玩意，這點我還是很欣慰的，不像html 嘗試搞什么XHTML2.0什么html5,js更過分，搞什么typescript什么的）一拍大腿，什么float什么嘛，什么惡心人的位置寬高物體水平垂直居中，什么float元素內(nèi)部元素居中，這都啥惡心不垃圾的玩意啊，哥有更簡單的方法解決你，

? flex的應(yīng)用有兩個簡單到讓人發(fā)指的地方

?看這里，看這里，瞅哪呢，看圖!

大家看 網(wǎng)易云音樂APP 用css布局實現(xiàn)，如果傳統(tǒng)的左右圖標(biāo) 分別float向兩側(cè)，那么中間三個元素圖標(biāo)等距居中是一個問題，給寬度或者不給寬度都不好處理，如果我們使用絕對定位，不僅考慮絕對定位不占空間，我們需要占位，又涉及到左邊間距和垂直間距的處理，要保證不同分辨率屏幕下永遠(yuǎn)水平垂直都在那個位置就必須使用 rem布局+js動態(tài)計算，rem又要考慮視網(wǎng)膜屏，大家心里想罵娘了，我特么就想讓幾個圖標(biāo)垂直居中，水平有間距，每一個屏幕上一樣。怎么特么那么費事。還好我們有flex布局。

#toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

好了，兩個圖標(biāo)規(guī)規(guī)矩矩的各自靠邊占了。

#iconTool {
    display: flex;
    justify-content: center;
}

沒毛病，中間部分規(guī)規(guī)矩中分了。

不用學(xué)很多沒用的東西大家就記住父元素，

#toolbar{
    display: flex;
    align-items: center;//這個負(fù)責(zé)縱向居中
    justify-content: space-between;//這個負(fù)責(zé)橫向居中或者兩邊站
}

我想讓#iconTool 占滿除了兩個圖標(biāo)之外的空間咋辦，

flex-grow:1;

有同學(xué)會說老師為啥不用

flex:1;

你用個屁用啊，你就是想太多了，flex里面包含flex-grow、flex-shrink、flex-basis ，你想把自己搞暈嗎？

別整沒用的，就記住剛才那兩個貨，你flex布局大部分問題都解決了，不會你再google,別動不動就想大而全的學(xué)東西，到時候啥都不會。

直接看圖!

大家看我紅圈圈起來的部分，基本上每一個app都用，但是大家知道的，有時候可惡心了，有時候左邊右邊間距不一樣了，或者左邊右邊要邊，中間又只要一個邊，而不是兩個邊，用first-child 和last-child 選擇器還要考慮兼容。另外還要使用box-sizing,里面的圖片不同設(shè)備寬高比例又不對了，反正怎么搞都特么不爽。還得圖片跟文字也得居中，老師想想就得包很多層，是不是還得用dl dd，別想太多，看我怎么做。現(xiàn)在我就告訴你一個好方法解放軍叔叔來了，大家看我怎么搞，其實簡單的又讓人發(fā)指了。我已最上面的今日推薦部分舉例

#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;
}

別瞅了，看我生活不要太美好，這樣就鳥了，你覺得這樣就夠了嗎？顯然不是，

有同學(xué)說老師這個不挺好嗎？好，你一定要記住，沒有無緣無故的愛也沒有無緣無故的恨。翻譯成技術(shù)的話就是，沒有問題就不會有解決方案。技術(shù)是為解決問題服務(wù)的，flex布局肯定變成慫蛋才會發(fā)明更牛掰的玩意。我們看這樣一種情況:

大家看這么個破玩意，這個是手機淘寶APP里面的一個布局，別看妹子，看我，我不想墨跡咱們看看flex怎么實現(xiàn)，你不是牛掰么，看代碼

老實說，如果讓一些前端開發(fā)者 在用flex實現(xiàn)這個布局和聞大彬哥的香之間做個選擇的話，很多開發(fā)者估計會

痛快的說愿聞其詳，因為不聞的話，自己可能卡出香來。

不是flex 慫蛋，是因為人家就是和一維的布局，二維就廢了。翻譯成人話就是flex布局適合一個方向布局，同時要搞橫向和縱向就搞不動了。有些人說flex布局和網(wǎng)格布局還有一個內(nèi)容優(yōu)先和布局優(yōu)先的問題，這里我就要忍不住吐槽了，我們學(xué)技術(shù)是為了應(yīng)用到工作中，因為沒有工作你吃啥，沒有工作了你穿啥，吃穿都沒了你還臭嘚瑟啥？你知道不知道內(nèi)容優(yōu)先和布局優(yōu)先對能夠更快更好的布局完活兒沒有半毛錢關(guān)系，程序員頭發(fā)已經(jīng)夠少了，少學(xué)點沒用的東西。

網(wǎng)上有些文章類似于5分鐘學(xué)會 CSS Grid 布局之類的文章，這些文章入門挺好的但是要想看完這個文章5分鐘就能夠工作中用還是有點費勁的。我又不是大自然的搬運工，能搜到的東西我就不講了，咱們不墨跡直接就上來一梭子代碼看看剛才的實際手淘布局怎么實現(xiàn)。

有同學(xué)說 老師你不講講這玩意，

只講兩點，第一點

.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;
    }

第二點，他很簡單千萬別想太復(fù)雜說什么我要好好學(xué)學(xué)，系統(tǒng)學(xué)學(xué)，學(xué)你妹啊，拿起來就用別有點新東西就事兒事兒的想大塊時間學(xué)，到最后也沒學(xué)，別想了，拿起鍵盤就是干就對了。

這里有同學(xué)會說，老師你瞎忽悠，flex和grid都是新技術(shù)，他們沒有辦法誰替代誰。

首先我告訴你，你說的沒錯甚至table布局是初代布局系統(tǒng)也有商榷，因為有人覺得從第一個網(wǎng)頁出來那個是第一代。我想說的是不管怎么分，你能說的很有道理就行，有自己思考在里面就行，別跟別人屁股后面人家說啥你跟著跑，對了內(nèi)個詞兒叫人云亦云就行。而第四代布局系統(tǒng)也是我總結(jié)出來的為什么他是第四代，而flex是第三代呢？

原因：

1.flex對標(biāo)的是float，本質(zhì)上還是一維布局，這就跟別人開著夏利，你開奔馳都是地面上跑沒啥本質(zhì)區(qū)別一樣。但是grid升維了，grid是飛機，在地面馬路這條線一維之上讓人能夠思考高度這個維度，以前是汽車一維交通工具（你只只能在水平方向的人一個方向開），飛機是二維（能俯沖了（橫向、縱向同時）），所以grid可以說是拓寬了css布局的維度，不排除將來會有三維布局的出現(xiàn)，不僅僅能css控制 橫向布局，縱向布局，還可以深度布局（這個要依賴于三維展示的出現(xiàn)，如VR，AR三維立體的展示設(shè)備出現(xiàn)）。

2.grid布局里面采用了“可視化布局（template部分，所見即所得）”，這個顛覆了傳統(tǒng)的，寫一句代碼刷一下瀏覽器這樣的開發(fā)方式，不排除以后會出現(xiàn)代碼即效果的開發(fā)模式。比如你再一個設(shè)備上畫一個區(qū)域，然后畫輪播圖，

類似于vc++控件但是更智能，更友好的方式。誰說不可能呢，大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最后html5的canvas火了，連CSS3網(wǎng)格布局是由微軟創(chuàng)建的一個模塊 ，最后火起來居然沒人認(rèn)識他。心疼我軟一秒鐘。

好了，不瞎逼逼了，總結(jié)一下，通過本文你應(yīng)該學(xué)會一下幾個東西。

1.了解網(wǎng)格布局的發(fā)展歷史，以便對未來布局技術(shù)的發(fā)展有一個客觀的判斷正確的選擇是否學(xué)習(xí)。

2.學(xué)會使用flex布局寫實際項目，而不是光就記住幾個屬性。

3.學(xué)會使用grid布局寫實際項目，而不是說我找時間研究研究。

4.如果覺得文章寫的好，記得在評論區(qū)留言或點贊，因為信彬哥，原地滿血復(fù)活，最主要是真特么的能漲工資。