Flexbox 学习

感谢牛逼的前端工程师们创造了Flex，从此样式布局不再那么蛋疼。OK，首先来点CSS基础吧

盒子内部的布局
1.文本的布局
2.盒模型本身的布局

盒子之间的布局visual formatting
1.脱离文档流盒子的布局
     · absolute布局
     · float布局

2.正常文档流盒子的布局
     · BFC布局(Block Formatting Context，块级元素格式化上下文)
     · IFC布局(Inline Formatting Context，内联格式化上下文)
     · FFC布局(Flex Formatting Contexts，自适应格式化上下文)
     · table布局
     · css grid布局

先了解上面的基本概念后然后聊一下flex的学习，最开始用flex布局一个分类页面，写完以后感觉非常爽，因为用的属性非常少。当测试的小妹妹拿着安卓机配置4.0系统来到我的面前，我的小弟颤抖了一下，所有的样式都错乱了，没办法上网一查才发现Android 4.4及以上版本才支持。我和Flex的第一次就是这样不愉快的，没事，生活还得继续。

现在我学习的Flex是philipwalton这哥们写的，感觉还不错吧，仔细研究一下发现有很多东西都挺棒的。特别是响应式布局这一块儿，还是蛮不错的。

从git上把代码down下来以后，老样子先npm install，然后是gulp serve -p 8000。在浏览器里面http://localhost:8000/，就下来就是见证它非常牛逼的地方，放大缩小浏览器窗口，如果用chrome调试的话，可以使用手机模式来看一下效果。

在本地跑起来以后有些慢，因为templates里面的header.html引得是谷歌的字体，所以你可以把fonts.google.com修改成fonts.useso.com，重新再跑一遍就会快很多。

首先查看main.css，原因就是最核心的就是这个部分

@import 'normalize.css';
@import 'suitcss-utils-display';
@import 'suitcss-utils-text';

@import './base/variables';
@import './base/custom-media';
@import './base/elements';

@import './components/aligner';
@import './components/browser';
@import './components/button';
@import './components/container';
@import './components/demo';
@import './components/error';
@import './components/feature';
@import './components/footer';
@import './components/grid';
@import './components/header';
@import './components/holy-grail';
@import './components/image';
@import './components/input-add-on';
@import './components/media';
@import './components/notice';
@import './components/section';
@import './components/site';

@import './utils/compat.css';
@import './utils/media';
@import './utils/size';
@import './utils/spacing';

@import './vendor/font-awesome-extensions';
@import './vendor/highlight';
@import './vendor/twitter';

引入的CSS分5个部分，第一个部分里面的CSS部分是属于重置和suitcss，suitcss是可以直接使用的class名字。
接下来CSS部分首先是响应式布局的设置，作者在这里设置4种格式break-sm、break-md、break-lg、high-dppx。特别是最后一个手机端的设置，感觉使用的比较巧妙，如果感兴趣，可以继续深挖下去。其次是作者自己做的一些适配性的工作。

第三部分CSS是主角了，非常深入的解释flexbox的使用和相应的效果。这个项目一共包含7个页面，可以在demo里面看到，