這篇文章扯扯犢子
上一篇給大家介紹了一下我們前端新式武器Flexbox。今天我們來看看他在實現一個框架要素 “柵格系統”是如何的易如反掌。
css框架，一聽這個詞大家肯定以為好高大上，但是，如拆解一下之后可以知道其實一個基礎的css框架包含這幾個要素就可以了：
- Layout
- Grid Systems
- Components
- Variable
- Responsive
在看一個css框架的時候可以按照上面的元素去拆分就可以很好的理解一個框架了。
我們來看看 怎么用flexbox 來輕松實現Grid系統吧。
intro
Grid 又被翻譯成 柵格系統，我覺得這是設計師和前端工程師，再經過多年的爭戰之后的一個平衡點，也稱得上是一個比較好的布局解決方案。
Why Flex
目前大部分的柵格系統使用的是float和inline-block，但是這兩者的都有他們各自的問題。
比如浮動 侵占了::before 和 ::after 屬性,還會出現清除浮動以后的后遺癥
而inline-block有他著名的空白間隙問題
由于Flex就是為了布局而生的，所以搞定柵格系統就很容易了。
How
說了這么多，我們開始來做吧。
柵格系統特點
理想的柵格系統應該擁有以下幾個特點：
- 每個item應該等高等寬的，默認flex size 為auto
- 每個item平分可用空間，你可以單獨給item 添加class來控制布局
- container 可以通過添加class來宏觀item
- 系統可以嵌套
- 支持 水平 和垂直的 各種對齊方式
支持響應式布局
container 和 item 可以參看第一篇文章
實現這些特性
基礎柵格
<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: 1item的放大屬性設置為1，即如果存在剩余空間，撐滿。
控制單獨的item
我們柵格系統按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的簡寫，默認值為0 1 auto；后兩個屬性可選。 -
flex-grow [<number>]放大比例，默認 0,即如果存在剩余空間，也不放大. -
flex-shrink項目的縮小比例，默認為1，即如果空間不足，該item將縮小 -
flex-basis [<length> | auto; /* default auto */]分配多余空間之前，項目占據的 main size, 默認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>
對齊
上對齊
<!-- 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>
垂直居中對齊
<div class="grid grid-middle"></div>
下對齊
<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的魔力了呢？短短幾十行代碼就搞定了一個Grid 系統。當然這里缺省了很多兼容瀏覽器的代碼（我們將在接下來的文章中講解《Flex怎么做瀏覽器兼容》）。
未來可能會有《Flex系列》，歡迎關注我的專欄知乎前端雜貨鋪。
好了大概就這樣吧，晚安~
