今天是一个特别的节日哈，#1024程序员节#，内部嗨皮一下就好了。但是节日是一个仪式，学习是永不止步的。今天聊聊弹性布局，或许都听厌烦了，自己很早之前也有了解，但是也只是皮毛，今天乘着节日记录一下吧。
自己之前第一眼瞧上flexbox（弹性布局）也就是看上了它的垂直居中，这在我们平时的float之类的布局中是个头疼的东西。最后发现flexbox魅力无穷。
注意：设为 Flex 布局以后，子元素的、float
和clear
属性将失效。vertical-align
基本概念
图片来源
仔细观察上面的图片，几个概念很重要：
- 黄色区域就是我们的弹性布局容器flex-container
- 白色区域就是我们的flex项目flex-item
- main axis是我们的主轴
- cross axis是交叉轴，和主轴垂直
- 主轴的开始称为main-start，结束为main-end。交叉轴开始为cross-start，结束为cross-end
- 单个项目(白色区域)占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
flexbox属性很多，这里分两类来说最好不过，弹性布局的盒子和内部的项目。
容器属性
——就是css样式写在flex-container上面
#display
.flex-container {
display: -webkit-flex; /* Safari */
display: flex | inline-flex;
}
当为flex布局的时候，那么元素展示为block的特性，和被作用的元素本身没关系 。就算是行内元素作用了flex的展示，也呈现block特性，也就是下面这样排列。下面左侧是flex，右侧是inline-flex。
#flex-direction
该属性规定了项目在容器中的布局方向，4个值，默认为row。
.flex-container {
flex-direction: row | row-reverse | column | column-reverse;
}
上面属性和下面图片从左到右依次对应。
默认元素显示在一行，所以会通过收缩尺寸来适应，最后两张图表明了。要想改变，就出现了下面的flex-wrap属性。
#flex-wrap
项目默认是不换行的，这个属性就是控制项目的换行表现形式。3个值，默认为nowrap。
.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
当不换行的时候，项目通过收缩来适应容器。上面属性和下面图片从左到右依次对应。
#flex-flow
该属性是flex-direction和flex-wrap的简写形式。所以默认值当然为：row nowrap。
推荐使用简写形式，所以实际使用中就用这个属性表达上面的含义即可。
#justify-content
该属性规定项目在主轴的表现形式，还记得上面第一个图的main axis吗？5个值有，默认值后为flex-start
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
上面属性和下面图片从左到右依次对应。
上面最后两张图片的区别就是space-between和space-around的区别。第一个值让项目的表现就是第一个和第二个项目分别位于主轴的开始main-start和结束main-end，中间空间均匀分配。第二个值就是所有项目两侧的间距一样，所以会出现中间的间距是两倍。
#align-items
该属性和justify-content类似，不过这是规定交叉轴的（cross axis），5个值，默认为stretch
.flex-container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面属性和下面图片从左到右依次对应。
其它的都好 理解，说明一下最后一个。Flex items fill the whole height (or width) from cross start to cross end of the flex container 。意思就是说会填充满整个高度（宽度），从交叉轴的起始端到末端。
#align-content
该属性规定的容器中每一行的表现形式（把行想象成上面的单个项目），就和justify-content规定项目在主轴上的表现形式一样。6个值，默认为stretch。
.flex-container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
上面属性和下面图片从左到右依次对应。
项目属性
——就是css样式写在flex-item上面
#order
该属性规定项目的排列顺序。数值越小，排列越靠前，默认为0。
默认是按照元素在html中的顺序排列。上面图的图第一张order为-1，第二张为1，可以看到变化。
#flex-grow
该属性规定项目的放大比例，为整数值，负数无效，默认为0。
按照放大来计算项目的size。如果值 都一样那就平均分布，如果其中一个项目的值为2，其它为1，就是两倍。
#flex-shrink
该属性规定项目的收缩比例，默认为1，负数无效。
和上面一样，只是上面是拉伸，这是收缩。
#flex-basis
该属性设置在分配多余空间之前，项目占据的主轴空间（main size）(表现形式就是元素的高度或者宽度，根据主轴的方向的确定)，默认值为auto，即项目本身的大小。下面第二个元素设置值为50px。
#flex
该属性是flex-grow、flex-shrink和flex-basis属性的简写，当然仍然推荐使用简写flex。默认值 0 1 auto
#align-self
该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-item属性。默认值为auto。
.flex-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
也就项目自己可以定义自己。我们给项目3设置flex-end
有点事情耽搁了，还是赶在节日前完成了，编辑的时候光标总是遗失还经历了一次浏览器奔溃，感谢自己，节日快乐。
文章没有下面的好，是自己的个人理解所成。
参考文献
下面这几篇文章，自己反复看了很多次，很有收获。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
最后附上scotch的在线实例flexbox，里面可以自己配置。
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/