css佈局簡史與決勝未來的第四代css佈局技術

css佈局簡史與決勝未來的第四代css佈局技術
一轉眼已經2018年,前端行業也風風雨雨的走過了10多年,網頁佈局也從最原始的文檔變成成了當前精彩紛呈的交互。當我看到第四代css佈局技術網格佈局的時候,就像我看到無數女神一樣的的反應,我們好像在哪見過,還記得嗎?

知道過去能更好的指導我們未來的技術學習,畢竟太陽底下沒有新鮮事,就像我看到最新的網格佈局聯想起曾經的初代table佈局樣,一切都變了,一切好像都是重新來過。

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

css佈局簡史與決勝未來的第四代css佈局技術

2006年註定是一個不平凡的一年,那一年微軟判了fontpage死刑,那一年XMLHttpRequest被W3C正式納入標準 ,那一年穀歌最性感的妞兒gmail已經兩歲了,重點是曾經統治PC網站90%以上的jquery 被 John Resig發佈了jQuery ,js一哥橫空出世,從此,前端工程師這個讓大量人榮耀與惆悵的職業如雨後春筍般成長起來,直到現在依然火爆,當然還有dreamwaver 8 發佈了。

一切都那麼美好,除了讓人噁心的初代table佈局。

初代table佈局

正如table的最早使用者所說,我把炸醬和麪倒在一起,並且沒法分開他。翻譯成人話就是,隨着業務的越來越複雜,做好的網頁你想改就是扯淡的事兒,特別難改。

css佈局簡史與決勝未來的第四代css佈局技術
然後第二代佈局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的應用有兩個簡單到讓人髮指的地方

第一個,元素垂直水平居中。

看這裏,看這裏,看圖:

css佈局簡史與決勝未來的第四代css佈局技術

大家看 網易雲音樂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,別動不動就想大而全的學東西,到時候啥都不會。

第二個,“豆腐塊”佈局。

直接看圖:

css佈局簡史與決勝未來的第四代css佈局技術
大家看我紅圈圈起來的部分,基本上每一個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佈局肯定變成慫蛋纔會發明更牛掰的玩意。我們看這樣一種情況:

css佈局簡史與決勝未來的第四代css佈局技術

大家看這麼個破玩意,這個是手機淘寶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佈局和網格佈局還有一個內容優先和佈局優先的問題,這裏我就要忍不住吐槽了,我們學技術是爲了應用到工作中,因爲沒有工作你吃啥,沒有工作了你穿啥,吃穿都沒了你還嘚瑟啥?你知道不知道內容優先和佈局優先對能夠更快更好的佈局完活兒沒有半毛錢關係,程序員頭髮已經夠少了,少學點沒用的東西。
css佈局簡史與決勝未來的第四代css佈局技術

那麼就開始看看第四代網絡佈局神奇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是第三代呢?
css佈局簡史與決勝未來的第四代css佈局技術

原因:

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-

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章