接触到flex一个多月了，今天做一个学习小结。如果有知识错误或者意见不同的地方。欢迎交流指教。
画外音：先说一下，我是怎么接触到flex布局的。对于正在学习的童鞋们，我建议大家没事可以逛逛网站，看看人家的源代码。至于怎么看？从浏览器已经生成的静态代码看（当然如果该公司的代码在github开源了，那就去github中看吧，也可以fork到自己的托管空间下创建派生自己改着玩。），或者去网站上下一些自己感兴趣的或者差不多效果的代码看。多看demo，多加学习。
一个月前看到国美金融美易理财的界面，网址：m.gomemyc.com/h5/。觉得它的布局很有意思呀，copy到本地，看了一下它的页面代码。发现在列表那边采用了flex方式的布局。然后就开始上网搜呀~ 网络真的是很好的学习工具O(∩_∩)O哈哈哈~
当时很仔细的看了
1.阮一峰的Flex布局教程：语法篇和实例篇。（写于2015年7月）
语法篇网址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例篇网址http://www.ruanyifeng.com/blog/2015/07/flex-examples.html?bsh_bid=683103006
2.大漠根据Chris Coyier翻译的《老的flexbox和新的flexbox》和《使用CSS3 Flexbox》（写于2013年5月）
中文网址：http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html
英文网址：http://css-tricks.com/old-flexbox-and-new-flexbox
以下是我的学习成果和案例分析。
如果你正在学习flex或者看了这篇文想要学习flex，那么我建议可以好好看看阮大神的文章。我的学习成果主要基于阮大神的文章，精简总结以便于个人查找。而案例分析，则是自己做的demo的实现，用于展示学习。
首先说明一下flex的功能。flex是Flexible Box的缩写，它是一种弹性布局的方式，更多的用在屏幕尺寸大小一大，网页需要适应不同尺寸的屏幕上。Flexbox可以让元素在容器（伸缩容器）中扩展和收缩，从而达到调整整个布局的响应效果。需要注意的一点是，flex布局后，子元素的float、clear、vertical-align属性都会失效。如图1 Flex布局容器展示图。
如图1 Flex布局容器展示图
介绍：采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex属性
flex-direction 决定主轴方向
flex-wrap 默认情况下，项目都在一条线上，定义如何换行。
flex-flow 上述的简写，默认row nowrap。
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉抽上如何对齐
align-content 多根轴线的对齐方式
① .box{flex-derection: row | row-reverse | column | column-reverse;}
row：主轴方向从左到右 。
row-reverse：主轴方向从右到左 。
column：交叉轴方向从上到下。
column-reverse：交叉轴方向从下到上。
案例：
② .box{flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap: 默认不换行
wrap： 换行，第一排在上方
wrap-reverse：换行，第一排在下方
③ .box { flex-flow:<flex-direction>||<flex-wrap>; }
④ .box{justify-content: flex-start |flex-end | center | space-between | space-around;}
flex-start: 左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，中间间隔
space-around：四周环绕，中间间隔大于item与边界间隔。
⑤ .box{align-items: flex-start | flex-end | center |baseline | stretch ;}
flex-start:交叉轴起点
flex-end ：交叉轴终点
center：交叉轴中点
baseline ：项目的第一行文字的基线对齐
stretch ：默认，如果项目未设置高或auto，将占满整个容器。
⑥ .box{align-content: flex-start | flex-end | center | space-between |space-around | str }
flex-start：与交叉轴起点对齐
flex-end：与交叉轴终点对齐
center：与交叉轴中点对齐
space-between：两端对齐，中间间隔
space-around：四周环绕，中间间隔大于item与边界间隔。
stretch：默认，如果项目未设置高或auto，将占满整个容器。
未完待续。