這篇文章扯扯犢子
上一篇給大家介紹了一下我們前端新式武器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)使用的是float
和inline-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):
- 每個(gè)item應(yīng)該等高等寬的驻龟,默認(rèn)flex size 為auto
- 每個(gè)item平分可用空間,你可以單獨(dú)給item 添加class來控制布局
- container 可以通過添加class來宏觀item
- 系統(tǒng)可以嵌套
- 支持 水平 和垂直的 各種對(duì)齊方式
支持響應(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怎么做瀏覽器兼容》)。
未來可能會(huì)有《Flex系列》褐桌,歡迎關(guān)注我的專欄知乎前端雜貨鋪。
好了大概就這樣吧象迎,晚安~