一轉(zhuǎn)眼已經(jīng)2018年，前端行業(yè)也風(fēng)風(fēng)雨雨的走過(guò)了10多年，網(wǎng)頁(yè)布局也從最原始的文檔變成成了當(dāng)前精彩紛呈的交互。當(dāng)我看到第四代css布局技術(shù)網(wǎng)格布局的時(shí)候，就像我看到無(wú)數(shù)女神一樣的的反應(yīng)，我們好像在哪見(jiàn)過(guò)，還記得嗎？

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、沁源ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的沁源網(wǎng)站制作公司

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

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

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

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

初代table布局

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

然后第二代布局css+div布局登場(chǎng)了，

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

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

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

是的你懂得，因?yàn)閏ss布局的墨跡，尤其是float布局各種清除浮動(dòng)之類(lèi)的東西，就跟挖完鼻屎得擦一個(gè)道理，真惡心。

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

第三代網(wǎng)絡(luò)布局系統(tǒng)flex。

flex的應(yīng)用有兩個(gè)簡(jiǎn)單到讓人發(fā)指的地方

第一個(gè)，元素垂直水平居中。

看這里，看這里，看圖：

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

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

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

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

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

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

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

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

flex-grow:1;

有同學(xué)會(huì)說(shuō)老師為啥不用

flex:1;

你用個(gè)毛線(xiàn)啊，你就是想太多了，flex里面包含flex-grow、flex-shrink、flex-basis ，你想把自己搞暈嗎？

別整沒(méi)用的，就記住剛才那兩個(gè)貨，你flex布局大部分問(wèn)題都解決了，不會(huì)你再google,別動(dòng)不動(dòng)就想大而全的學(xué)東西，到時(shí)候啥都不會(huì)。

第二個(gè)，“豆腐塊”布局。

直接看圖：

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

#recommend-items {
    display: flex;
    justify-content: space-around;//橫向子元素排列方式，不用記住，用的時(shí)候試試就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;
}

別瞅了，看我生活不要太美好，這樣就鳥(niǎo)了，你覺(jué)得這樣就夠了嗎？顯然不是，牛掰666的第四代網(wǎng)格布局系統(tǒng)來(lái)了。

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

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

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

痛快的說(shuō)愿聞其詳，因?yàn)椴宦劦脑?huà)，自己可能卡出香來(lái)。

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

那么就開(kāi)始看看第四代網(wǎng)絡(luò)布局神奇grid布局的強(qiáng)大之處。

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

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

只講兩點(diǎn)，第一點(diǎn)

.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;//這里不是三分之一 是第一條線(xiàn)到第三條線(xiàn)
        grid-row: 1 / 3;
    }

第二點(diǎn)，他很簡(jiǎn)單千萬(wàn)別想太復(fù)雜說(shuō)什么我要好好學(xué)學(xué)，系統(tǒng)學(xué)學(xué)，學(xué)你妹啊，拿起來(lái)就用別有點(diǎn)新東西就事兒事兒的想大塊時(shí)間學(xué)，到最后也沒(méi)學(xué)，別想了，拿起鍵盤(pán)就是干就對(duì)了。

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

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

原因：

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

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

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

好了，總結(jié)一下，通過(guò)本文你應(yīng)該學(xué)會(huì)一下幾個(gè)東西。

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

2.學(xué)會(huì)使用flex布局寫(xiě)實(shí)際項(xiàng)目，而不是光就記住幾個(gè)屬性。

3.學(xué)會(huì)使用grid布局寫(xiě)實(shí)際項(xiàng)目，而不是說(shuō)我找時(shí)間研究研究。

4.如果覺(jué)得文章寫(xiě)的好，記得在評(píng)論區(qū)留言、點(diǎn)贊啊，因?yàn)槊姘妹?，原地滿(mǎn)血復(fù)活，最主要是還能漲工資：）。

-END-