Flexbox 打造柵格系統(tǒng)

這篇文章扯扯犢子

上一篇給大家介紹了一下我們前端新式武器Flexbox也拜。今天我們來看看他在實(shí)現(xiàn)一個(gè)框架要素 “柵格系統(tǒng)”是如何的易如反掌换薄。

css框架呐赡,一聽這個(gè)詞大家肯定以為好高大上副签,但是论衍,如拆解一下之后可以知道其實(shí)一個(gè)基礎(chǔ)的css框架包含這幾個(gè)要素就可以了:

  • Layout
  • Grid Systems
  • Components
  • Variable
  • Responsive

在看一個(gè)css框架的時(shí)候可以按照上面的元素去拆分就可以很好的理解一個(gè)框架了奶是。
我們來看看 怎么用flexbox 來輕松實(shí)現(xiàn)Grid系統(tǒng)吧楣责。

intro

Grid 又被翻譯成 柵格系統(tǒng)央拖,我覺得這是設(shè)計(jì)師和前端工程師彭谁,再經(jīng)過多年的爭(zhēng)戰(zhàn)之后的一個(gè)平衡點(diǎn),也稱得上是一個(gè)比較好的布局解決方案。

Why Flex

目前大部分的柵格系統(tǒng)使用的是floatinline-block凡恍,但是這兩者的都有他們各自的問題。
比如浮動(dòng) 侵占了::before::after 屬性,還會(huì)出現(xiàn)清除浮動(dòng)以后的后遺癥
inline-block有他著名的空白間隙問題

由于Flex就是為了布局而生的点额,所以搞定柵格系統(tǒng)就很容易了咪啡。

How

說了這么多,我們開始來做吧房铭。

柵格系統(tǒng)特點(diǎn)

理想的柵格系統(tǒng)應(yīng)該擁有以下幾個(gè)特點(diǎn):

  1. 每個(gè)item應(yīng)該等高等寬的驻龟,默認(rèn)flex size 為auto
  2. 每個(gè)item平分可用空間,你可以單獨(dú)給item 添加class來控制布局
  3. container 可以通過添加class來宏觀item
  4. 系統(tǒng)可以嵌套
  5. 支持 水平 和垂直的 各種對(duì)齊方式
  6. 支持響應(yīng)式布局

container 和 item 可以參看第一篇文章

實(shí)現(xiàn)這些特性

基礎(chǔ)柵格

    
    <div class="grid">
        <div class="grid-cell">
            <div class="demo">1</div>
        </div>
    </div>
    <div class="grid">
        <div class="grid-cell">
            <div class="demo">1/2</div>
        </div>
        <div class="grid-cell">
            <div class="demo">1/2</div>
        </div>
    </div>

    .grid { display: flex; }
    .grid-cell { flex:1 }

說明:

  • flex: 1 item的放大屬性設(shè)置為1缸匪,即如果存在剩余空間翁狐,撐滿。

控制單獨(dú)的item

我們柵格系統(tǒng)按12格分


        <div class="grid">
            <div class="grid-cell col-1">
                <div class="demo">1/12</div>
            </div>
            <div class="grid-cell col-3">
                <div class="demo">3/12</div>
            </div>
            <div class="grid-cell">
                <div class="demo">auto</div>
            </div>
        </div>
.grid-cell.col-1 { flex: 0 0 8.33333%; }
.grid-cell.col-2 { flex: 0 0 16.66667%; }
.grid-cell.col-3 { flex: 0 0 25%; }
.grid-cell.col-4 { flex: 0 0 33.33333%; }
.grid-cell.col-5 { flex: 0 0 41.66667%; }
.grid-cell.col-6 { flex: 0 0 50%; }
.grid-cell.col-7 { flex: 0 0 58.33333%;}
.grid-cell.col-8 { flex: 0 0 66.66667%;}
.grid-cell.col-9 { flex: 0 0 75%;}
.grid-cell.col-10{ flex: 0 0 83.33333%;}
.grid-cell.col-11{ flex: 0 0 91.66667%;} 
.grid-cell.col-11{ flex: 0 0 100%;} 

說明:

  • flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫凌蔬,默認(rèn)值為0 1 auto露懒;后兩個(gè)屬性可選。
  • flex-grow [<number>] 放大比例砂心,默認(rèn) 0,即如果存在剩余空間懈词,也不放大.
  • flex-shrink 項(xiàng)目的縮小比例,默認(rèn)為1计贰,即如果空間不足钦睡,該item將縮小
  • flex-basis [<length> | auto; /* default auto */] 分配多余空間之前,項(xiàng)目占據(jù)的 main size, 默認(rèn)auto

嵌套

天生嵌套支持

        <!-- Nested -->
        <div class="grid">
            <div class="grid-cell col-1">
                <div class="demo">
                     <div class="grid">
                        <div class="grid-cell">
                            <div class="demo">Nested</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-cell col-3">
                <div class="demo">3/12</div>
            </div>
            <div class="grid-cell">
                <div class="demo">auto</div>
            </div>
        </div>

對(duì)齊

上對(duì)齊

    <!-- align top-->
        <div class="grid grid-top">
            <div class="grid-cell">
                <div class="demo">This cell should be top-aligned.</div>
            </div>
            <div class="grid-cell col-6">
                <div class="demo">
                    Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
                </div>
            </div>
            <div class="grid-cell">
                <div class="demo">This cell should be top-aligned.</div>
            </div>
        </div>

垂直居中對(duì)齊

    <div class="grid grid-middle"></div>

下對(duì)齊

    <div class="grid grid-bottom"></div>
    .grid.grid-top      { align-items: flex-start; }
    .grid.grid-middle   { align-items: center; }
    .grid.grid-bottom   { align-items: flex-end; }
    .grid.grid-stretch  { align-items: stretch; }
    .grid.grid-baseline { align-items: baseline; }
    .grid.grid-left     { justify-content: flex-start; }
    .grid.grid-center   { justify-content: center; }
    .grid.grid-right    { justify-content: flex-end; }
    .grid.grid-between  { justify-content: space-between; }
    .grid.grid-around   { justify-content: space-around; }

到這里大家有沒有看到flex的魔力了呢躁倒?短短幾十行代碼就搞定了一個(gè)Grid 系統(tǒng)荞怒。當(dāng)然這里缺省了很多兼容瀏覽器的代碼(我們將在接下來的文章中講解《Flex怎么做瀏覽器兼容》)。

源代碼在這里秧秉,Demo

未來可能會(huì)有《Flex系列》褐桌,歡迎關(guān)注我的專欄知乎前端雜貨鋪

好了大概就這樣吧象迎,晚安~

參考文章

Better, Simpler Grid Systems

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荧嵌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子砾淌,更是在濱河造成了極大的恐慌啦撮,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汪厨,死亡現(xiàn)場(chǎng)離奇詭異赃春,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)劫乱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門织中,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锥涕,“玉大人,你說我怎么就攤上這事狭吼〔阕梗” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵刁笙,是天一觀的道長(zhǎng)破花。 經(jīng)常有香客問我,道長(zhǎng)采盒,這世上最難降的妖魔是什么旧乞? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮磅氨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嫡纠。我一直安慰自己烦租,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布除盏。 她就那樣靜靜地躺著叉橱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪者蠕。 梳的紋絲不亂的頭發(fā)上窃祝,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音踱侣,去河邊找鬼粪小。 笑死,一個(gè)胖子當(dāng)著我的面吹牛抡句,可吹牛的內(nèi)容都是我干的探膊。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼待榔,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼逞壁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起锐锣,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤腌闯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后雕憔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姿骏,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年橘茉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了工腋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片姨丈。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖擅腰,靈堂內(nèi)的尸體忽然破棺而出蟋恬,到底是詐尸還是另有隱情,我是刑警寧澤趁冈,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布歼争,位于F島的核電站,受9級(jí)特大地震影響渗勘,放射性物質(zhì)發(fā)生泄漏沐绒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一旺坠、第九天 我趴在偏房一處隱蔽的房頂上張望乔遮。 院中可真熱鬧,春花似錦取刃、人聲如沸蹋肮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)坯辩。三九已至,卻和暖如春崩侠,著一層夾襖步出監(jiān)牢的瞬間漆魔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工却音, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留改抡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓僧家,卻偏偏與公主長(zhǎng)得像雀摘,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子八拱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,424評(píng)論 0 26
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,460評(píng)論 0 6
  • 前言 FlexBox是css3的一種新的布局方式阵赠,天生為解決布局問題而存在的它,比起傳統(tǒng)的布局方式肌稻,我們使用Fle...
    zevei閱讀 1,414評(píng)論 23 3
  • 傳統(tǒng)的網(wǎng)頁(yè)布局基于盒裝模型清蚀,使用display,position爹谭,float屬性來達(dá)成各種布局枷邪。對(duì)于一些特殊的布局...
    exialym閱讀 2,627評(píng)論 0 11
  • 簡(jiǎn)書的Markdown貌似不支持插入iframe,所以文章里的JSFiddle示例都改做截圖了诺凡,如果有需要可以點(diǎn)擊...
    kangflict閱讀 1,111評(píng)論 2 8