css3 flex流动自适应响应式布局样式类

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 样式类

1. css3 flex 的部分属性在ie和火狐下表现不佳或支持不完善，其中ie9及以下完全不支持，ie10不支持flex-grow（即.flex-grow-0 .flex-grow-1类），火狐24不支持flex-wrap（即.flex-wrap类）。
2. css3 flex 布局以主轴在水平方向、侧轴在垂直方向为准，行（主轴）为水平方向、列（侧轴）为垂直方向。当主轴在垂直方向、侧轴在水平方向时，行即为垂直方向，列即为水平方向。无论怎样，行都为主轴、列都为侧轴。
3. 以下各个flex布局类命名均以主轴在水平方向为准，即主轴为行；并且大部分类名都是应用在父级flex容器上的，除了.flex-grow-0 .flex-grow-1。
4. flex容器：
   • 行布局：.flex-row
   • 行反布局：.flex-row-reverse
   • 列布局：.flex-col
   • 列反布局：.flex-col-reverse
   • 换行布局（默认是不支持换行的*）：.flex-wrap
5. flex容器单行水平方向项目排列方式
   • 开始方向排列：.flex-row-start
   • 居中方向排列：.flex-row-center
   • 结束方向排列：.flex-row-end
   • 两端方向排列，开始结束有余白：.flex-row-around
   • 两端方向排列，开始结束无余白：.flex-row-between
6. flex容器多行垂直方向项目排列方式
   • 开始方向排列：.flex-rows-start
   • 居中方向排列：.flex-rows-center
   • 结束方向排列：.flex-rows-end
   • 两端方向排列，开始结束有余白：.flex-rows-around
   • 两端方向排列，开始结束无余白：.flex-rows-between
7. flex容器单行垂直方向项目对齐方式
   • 开始对齐：.flex-col-start
   • 居中对齐：.flex-col-center
   • 结束对齐：.flex-col-end
   • 拉伸对齐：.flex-col-stretch
8. flex项目垂直方向项目对齐方式（与.flex-col类似，只是其优先级更高）
   • 开始对齐：.flex-self-start
   • 居中对齐：.flex-self-center
   • 结束对齐：.flex-self-end
   • 拉伸对齐：.flex-self-stretch
9. flex项目在剩余空白上分配占比
   • 占比为0：.flex-grow-0
   • 占比为1：.flex-grow-1

下面依次说说如何使用该样式类。

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代码如：

1

2

3

1

2

3

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