引言
flex布局是css3推出的新布局方式，其简洁又灵活的操作可以帮助开发者快速实现各种布局。相信大家和我有一样的感受，自从使用了flex就再也没用过浮动布局了。
flex介绍
flex布局核心是基于双轴设计完成，双轴分为主轴和侧轴，主轴方向和侧轴方向始终是互相垂直的也就是如果主轴是横向那么侧轴就是纵向，如果主轴是纵向的，那侧轴自动成为横向。flex的api太多是其最大的诟病，本文将按照其功能分类进行讲解讨论。
flex详解
html准备
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
1.flex-direction（控制主轴方向）
flex-direction负责控制主轴的方向，主轴的方向也就对应元素的排布方向。默认情况下主轴是横向从左到右排布，侧轴是从上到下排布。我们永远牢记两个轴永远是垂直的，当主轴被我们修改为列排布，那侧轴就自动调整了横向排布。
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
flex-direction: row 主轴默认横向排布，方向是从左到右,侧轴是其垂直方向也就是从上到下。
flex-direction: row-reverse 主轴横向排布，方向是从右向左,侧轴是其垂直方向也就是从上到下。
flex-direction: column 主轴垂直排布，方向是从上到下,侧轴是其垂直方向也就是左到右
flex-direction: column-reverse 主轴垂直排布，方向是从下到上,侧轴是其垂直方向也就是从左到右。
2.justify-content（控制主轴方向元素对齐方式）
justify-content:cener;
justify-content:space-between;
justify-content:space-around;
justify-content:space-between;
justify-content: end;(整体移动末尾对齐)
justify-content:cener元素在主轴方向上居中对齐
justify-content:space-between元素在主轴方向上两端对齐
justify-content:space-around元素在主轴方向上均匀分布
justify-content:end元素在主轴方向上末尾对齐，注意此处末尾对齐是整体移动到末尾，不是逐个元素依次末尾排布
3.align-items（控制侧轴方向元素对齐方式）
align-items:end
align-item:center
align-items:end元素在侧轴方向对齐方式为末尾对齐
align-items:center元素在侧轴方向对齐方式是居中对齐
4.flex-warp（控制元素超出容器时是否换行）
align-items:nowarp默认是不换行
align-items:warp超出后换行
总结
以上只是简单总结常用的flex操作，后续会继续更新。
