下面我们通过flexbox布局实现筛子的每个面的布局。
案例：骰子
案例：精美骰子
基本网格布局基本网格布局和骰子很相似，但是需要设置缩放比例。
案例：基本网格布局
百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
案例：百分比布局
圣杯布局圣杯布局(Holy Grail Layout)指的是一种常见的网站布局。页面分成三个部分，头部header，身体Body，尾部footer。其中身体又分为导航、主体、副栏。
案例：圣杯布局
Sticky Footer(固定底栏布局)Sticky Footer也是个比较典型的布局，当页面内容比较少的时候，希望底栏总是放在底部。当然在flex之前也已经有了相应的解决方案，像业内比较典型的cssstickyfooter上的解决方案，有兴趣的同学可以研究下。
也可以参考下国外大神ryanfait写的案例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?
热门评论
-
微积分20162016-12-29 1
查看全部评论king老师的课，必属精品。赞\(≧▽≦)/