溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一轉眼已經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" >
<img src="img/1.jpg" alt="">
</div>
<div class="item2" >
<img src="img/1.jpg" alt="">
</div>
<div class="item3" >
<img src="img/1.jpg" alt="">
</div>
<div class="item4" >
<img src="img/1.jpg" alt="">
</div>
<div class="item5" >
<img src="img/1.jpg" alt="">
</div>
<div class="item6" >
<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.如果覺得文章寫的好，記得在評論區留言、點贊啊，因為面包妹妹，原地滿血復活，最主要是還能漲工資：）。
-END-
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
