html设置文本框余白,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

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

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初始化。如下图：

其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：换行布局，即主轴在水平方向时，主轴可以折行，类似于现在的文字换行；反之，主轴在垂直方向，主轴可以折列，类似于古代的文字换列，在使用多列布局时，需设置容器的高度。

如图：

主轴折行示例：

2.3、单行水平方向排列方式

.flex-start(默认)：居左排列。

.flex-center：居中排列。

.flex-end：居右排列。

.flex-around：分散排列。

.flex-between：分开排列。

如图：

2.4、多行垂直方向排列方式

需设置容器的固定高度。

.flex-rows-start(默认)：多行居顶对齐。

.flex-rows-center：多行居中对齐。

.flex-rows-end：多行居底对齐。

.flex-rows-around：多行分散对齐。

.flex-rows-between：多行分开对齐。

如图：

2.5、单行内对齐方式

.flex-col-start(默认)：顶部对齐。

.flex-col-center：居中对齐。

.flex-col-end：居底对齐。

.flex-col-stretch：拉伸对齐。

如图：

2.6、单项目行内对齐方式

该样式作用于flex项目，与.flex-col-*相同，表示垂直方向的对齐方式，只是其只作用于单个flex项目，优先级比它高。详细：

.flex-self-start(默认)：项目垂直方向居顶对齐。

.flex-self-center：项目垂直方向居中对齐。

.flex-self-end：项目垂直方向居中对齐。

.flex-self-stretch：项目垂直方向拉伸对齐。

如图：

2.7、剩余空间分配占比

该样式作用于flex项目。

.flex-grow-0(默认)：剩余空间分配占比为0。

.flex-grow-1：剩余空间分配占比为1。

如图：

原文链接：http://qianduanblog.com/2881.html