1、再说css3 flex
一旦一个容器赋予了display:flex属性，将会有以下特点：
- 项目无法设置浮动。
- 列表的样式会被清除。
- 无法使用
vertical-align设置垂直对齐方式。
目前互联网上关于flex流动布局的文章很少，搜索关于flex的文章，大部分还介绍的是旧的知识点，显然已经不符合当前的w3c标准了，要想了解flex的相关内容，可以参考
http://qianduanblog.com/2549.html。并且，支持flex的浏览器也很少，只有谷歌浏览器完全支持，其他低版本的webkit不完全支持，火狐也不完全支持（不支持flex-wrap），ie10及以上部分支持。
flex布局非常适宜当前的移动设备和大屏幕浏览器网页开发非常的便捷，是未来网页开发布局设计的方向，是一个未来技术。flex布局能够编写代码小，各种宽度、高度、位置都由浏览器自身按照既定规则完成适配，跨平台无障碍阅读体验。
2、flex 样式类
- css3 flex 的部分属性在ie和火狐下表现不佳或支持不完善，其中ie9及以下完全不支持，ie10不支持
flex-grow（即.flex-grow-0 .flex-grow-1类），火狐24不支持flex-wrap（即.flex-wrap类）。 - css3 flex 布局以主轴在水平方向、侧轴在垂直方向为准，行（主轴）为水平方向、列（侧轴）为垂直方向。当主轴在垂直方向、侧轴在水平方向时，行即为垂直方向，列即为水平方向。无论怎样，行都为主轴、列都为侧轴。
- 以下各个flex布局类命名均以主轴在水平方向为准，即主轴为行；并且大部分类名都是应用在父级flex容器上的，除了
.flex-grow-0 .flex-grow-1。 - flex容器：
- 行布局：
.flex-row - 行反布局：
.flex-row-reverse - 列布局：
.flex-col - 列反布局：
.flex-col-reverse - 换行布局（默认是不支持换行的*）：
.flex-wrap
- 行布局：
- flex容器单行水平方向项目排列方式
- 开始方向排列：
.flex-row-start - 居中方向排列：
.flex-row-center - 结束方向排列：
.flex-row-end - 两端方向排列，开始结束有余白：
.flex-row-around - 两端方向排列，开始结束无余白：
.flex-row-between
- 开始方向排列：
- flex容器多行垂直方向项目排列方式
- 开始方向排列：
.flex-rows-start - 居中方向排列：
.flex-rows-center - 结束方向排列：
.flex-rows-end - 两端方向排列，开始结束有余白：
.flex-rows-around - 两端方向排列，开始结束无余白：
.flex-rows-between
- 开始方向排列：
- flex容器单行垂直方向项目对齐方式
- 开始对齐：
.flex-col-start - 居中对齐：
.flex-col-center - 结束对齐：
.flex-col-end - 拉伸对齐：
.flex-col-stretch
- 开始对齐：
- flex项目垂直方向项目对齐方式（与
.flex-col类似，只是其优先级更高）- 开始对齐：
.flex-self-start - 居中对齐：
.flex-self-center - 结束对齐：
.flex-self-end - 拉伸对齐：
.flex-self-stretch
- 开始对齐：
- flex项目在剩余空白上分配占比
- 占比为0：
.flex-grow-0 - 占比为1：
.flex-grow-1
- 占比为0：
下面依次说说如何使用该样式类。
2.0、简要说明
flex样式类，在描述行和列的时候，是以主轴为水平、侧轴以垂直方向为例的（参考：http://qianduanblog.com/2549.html#1%E3%80%81%E6%B5%81%E5%8A%A8%E5%B8%83%E5%B1%80），此时行即为水平方向、列即为垂直方向；但如果主轴在垂直方向、侧轴在水平方向时，行即为垂直方向、列即为水平方向。因在实际情况中，前者使用的概率最大，所以采用以行描述主轴在水平方向、列描述侧轴在垂直方向，更为直观。
2.1、flex初始化
使用.flex样式类即可对容器进行flex初始化。如下图：
demo：http://demo.qianduanblog.com/2881/1.html
其HTML代码如：
2.2、主轴方向
.flex-row（默认）：flex行布局，即主轴在水平方向、侧轴在垂直方向。.flex-row-reverse：flex行反布局，与.flex-row类似，更改水平方向从右往左。.flex-col：flex列布局，即主轴在垂直方向、侧轴在水平方向。.flex-col-reverse：flex行反布局，与.flex-col类似，更改垂直方向从下往上。.flex-wrap：换行布局，即主轴在水平方向时，主轴可以折行，类似于现在的文字换行；反之，主轴在垂直方向，主轴可以折列，类似于古代的文字换列，在使用多列布局时，需设置容器的高度。
如图：
demo：http://demo.qianduanblog.com/2881/2.html
主轴折行示例：
同理，折列也是相同情况，demo：http://demo.qianduanblog.com/2881/3.html。
2.3、单行水平方向排列方式
.flex-start（默认）：居左排列。.flex-center：居中排列。.flex-end：居右排列。.flex-around：分散排列。.flex-between：分开排列。
如图：
demo：http://demo.qianduanblog.com/2881/4.html。
2.4、多行垂直方向排列方式
需设置容器的固定高度。
.flex-rows-start（默认）：多行居顶对齐。.flex-rows-center：多行居中对齐。.flex-rows-end：多行居底对齐。.flex-rows-around：多行分散对齐。.flex-rows-between：多行分开对齐。
如图：
详细demo：http://demo.qianduanblog.com/2881/5.html。
2.5、单行内对齐方式
.flex-col-start（默认）：顶部对齐。.flex-col-center：居中对齐。.flex-col-end：居底对齐。.flex-col-stretch：拉伸对齐。
如图：
详细demo：http://demo.qianduanblog.com/2881/6.html。
2.6、单项目行内对齐方式
该样式作用于flex项目，与.flex-col-*相同，表示垂直方向的对齐方式，只是其只作用于单个flex项目，优先级比它高。详细：
.flex-self-start（默认）：项目垂直方向居顶对齐。.flex-self-center：项目垂直方向居中对齐。.flex-self-end：项目垂直方向居中对齐。.flex-self-stretch：项目垂直方向拉伸对齐。
如图：
详细demo：http://demo.qianduanblog.com/2881/7.html。
2.7、剩余空间分配占比
该样式作用于flex项目。
.flex-grow-0（默认）：剩余空间分配占比为0。.flex-grow-1：剩余空间分配占比为1。
如图：
详细demo：http://demo.qianduanblog.com/2881/8.html
原文链接：http://qianduanblog.com/2881.html