flex是flexible box的缩写，意为弹性布局。用来为盒模型提供最大的灵活性。任何一个容器都可以通过设置display为flex或inline-flex将其指定为flex布局。设置flex布局之后，子元素的float、clear和vertical-align属性将失效。
采用flex布局的元素称为flex容器，而其所有子元素称为flex项目。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。轴的起始和结束为止分别称作main/cross start和main/cross end。项目默认沿主轴排列，项目占据的轴的空间叫main/cross size。详见下图：
flex布局分为flex容器和flex项目，因而就有flex容器属性和flex项目属性的分别，在此，只对flex的容器属性做介绍，关于flex属性的介绍在博文《细说css3 flex布局之flex项目属性》中。
以下6个属性是作用在flex容器上的：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.1 flex-direction属性
该属性定义主轴的方向，即项目的排列方向。value的取值包括：row，row-reverse，column，column-reverse，其中row是默认值，水平方向（起点在左端），column是垂直方向（起点在顶端），带-reverse的值则表示反方向。用法及效果如下：
html代码
<div class="flex-box">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</div>css代码
.flex-box{ background:orange; display: flex; /*定义为flex布局*/ flex-direction:row-reverse; /*主轴为水平方向，起点在右端*/ }
.flex-item{ margin:10px; height:100px; width:100px; background: purple; color:#fff; }效果图：
1.2 flex-wrap属性
该属性定义项目是否换行并且如何换行。在默认情况下，项目都排在一条轴线上，如果一条轴线排不下，浏览器就根据这个属性的值对项目排列作出调整。value的取值包括：nowrap，wrap，wrap-reverse，其中，nowrap是默认值，不换行。用法及效果如下：
.item-class{ flex-grow:1; }效果图：
说明：wrap表示换行，第一行在上方。使用row-reverse换行时，第一行在下方，亦即图中item6会出现在第一行。
1.3 flex-flow属性
该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap。使用方式如下：
.flex-item{ flex-flow:colunm wrap; }1.4 justify-content属性
该属性定义了项目在主轴上（main axis）的对齐方式。value的取值包括：
- flex-start：默认值。轴的起始端（main/cross start）
- flex-end：轴的终点端
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。那么项目之间的间隔就是项目与边框之间的间隔的两倍。用法及效果如下：
.flex-item{ justify-content:space-between; }效果图：
说明：这些属性对项目的作用是根据主轴的方向不同而改变的，如果将direction设置为column，那么这些效果则表现在纵向。
1.5 align-items属性
该属性定义项目在交叉轴上的对齐方式。value的取值包括：
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：居中
- baseline：以项目的第一行文字的基线对齐
- stretch：默认值，如果项目未设置高度或设为auto，那么项目将占满整个容器的高度。
用法及效果如下：
.flex-item{ align-items:baseline; }效果图：
1.6 align-content属性
该属性定义了多个轴线的对齐方式。value的取值包括：
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：交叉轴上居中
- space-between：交叉轴上两端对齐，轴线之间的间隔两端分布
- space-around：每个轴线两侧的间隔都相等。那么，轴线之间的间隔是轴线与边框之间间隔的两倍
- stretch：默认值，轴线占满整个交叉轴
咦！怎么都这么熟悉呢？对比原来发现这个属性的取值是跟前两个属性的取值有很大相似的。但它们其的效果还是有区别的。看图：
对比下align-items里面的center，是不是发现不同呢？每一行项目之间的距离变小了！是变小了吗？其实是轴线居中了！在这里，因为项目的换行，形成了多条轴线，而align-content就是作用在轴线上的，所以它会让每一条轴线居中。而align-items是将所有的项目看做一个整体，即使项目换行，也是将整个项目看做是一条轴线，最后将这个整体居中。
关于flex布局中的容器属性在这里就介绍完了，由于flex布局的知识点较多，因此没有在一篇博文中将其详细介绍完，剩下的flex布局中的项目属性大家可以参考博文《细说css3 flex布局值flex容器属性》。
未完待续·······