Flexbox深入浅出系列之实战演示(7)

骰子大作战

下面我们通过flexbox布局实现筛子的每个面的布局。

案例：骰子

案例：精美骰子

基本网格布局

基本网格布局和骰子很相似，但是需要设置缩放比例。

案例：基本网格布局

百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

案例：百分比布局

圣杯布局

圣杯布局(Holy Grail Layout)指的是一种常见的网站布局。页面分成三个部分，头部header，身体Body，尾部footer。其中身体又分为导航、主体、副栏。

案例：圣杯布局

Sticky Footer(固定底栏布局)

Sticky Footer也是个比较典型的布局，当页面内容比较少的时候，希望底栏总是放在底部。当然在flex之前也已经有了相应的解决方案，像业内比较典型的cssstickyfooter上的解决方案，有兴趣的同学可以研究下。

也可以参考下国外大神ryanfait写的案例sticky-footer

实现这种形式很简单，我们可以看下简单的案例：

案例：sticky footer

接着我们看下通过Flexbox实现的Sticky Footer：

案例： flexbox sticky footer

看到了，使用flexbox实现这种sticky footer是不是很容易，其实就是让内容flex-grow:1,占满剩余的空间。

最后再给大家推荐个资源，可以看看css-tricks上Sticky Footer, Five Ways的实现。

---

我不是神马技术大婶,也不是神马砖家，我和你们一样，是在技术这个道路上不断努力的小菜鸟…
但我希望你们听了我的课程会有一些收获，哪怕在技术上对你有一点点的帮助，我就满足了…
敲好每一行代码，讲好每一堂课程…

This Is King Style,Also King Show Time~Are You Ready?