HTML5 发展如火如荼，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写…
October 6, 2015
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局
Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。
说明：
1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。
2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。
3.设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴：水平的叫主轴（main axis）和垂直的叫交叉轴（cross axis）。
Flex容器属性
Flex容器有6种属性可用分别是：
| 属性 | 详细说明 |
| flex-direction | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | 控制Flex容器是单行显示还是多行显示，而交叉轴的方向就决定着新线的排列方向 |
| flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写 |
| justify-content | 定义了Flex项目在主轴方向上的对齐方式 |
| align-items | 定义项目在交叉轴上的对齐方式 |
| align-content | 定义了多根轴线的对齐方式，如果只有一条轴线，那么此属性不起作用 |
下面就逐一给大家介绍这些属性有什么用，以及他们所对应的属性值又是什么意思。
| flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向（即项目的排列方向） |
|
| 名称（属性/值） | 详细说明 |
| row（默认值） | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
| 效果演示 | |
| flex-wrap: nowrap | wrap | wrap-reverse; 属性可以控制Flex容器是单行显示还是多行显示，而交叉轴的方向就决定着新线的排列方向 |
|
| 属性/值 | 详细说明 |
| nowrap | 不换行 |
| wrap | 换行 |
| wrap-reverse | 换行与wrap相似，但行的顺序是倒过来的 |
| 效果演示 | |
| 属性/值 | 详细说明 |
| flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为flex-flow : row nowrap |
| justify-content: flex-start | flex-end | center | space-between | space-around; 属性定义了Flex项目在主轴方向上的对齐方式 |
|
| 属性/值 | 详细说明 |
| flex-start | 类似于左浮动（float：left） |
| flex-end | 类似于右浮动（float:right） |
| center | Flex项居中 |
| space-between | 两端对齐容器，各个Flex项目之间的间距相等 |
| space-around | 每一个Flex项目两侧的间隔相等 |
| 效果演示 | |
| align-items: flex-start | flex-end | center | baseline | stretch; 属性定义项目在交叉轴上的对齐方式 |
|
| 属性/值 | 详细说明 |
| flex-start | 对齐交叉轴的起点 |
| flex-end | 对齐交叉轴的终点 |
| center | 以交叉轴为参考，居中对齐 |
| baseline | Flex项目第一行文字基线对齐 |
| stretch | 如果Flex项目未定义高度或者设置为auto，Flex项目将占满整个窗口的高度 |
| 效果演示 | |
| align-content: flex-start | flex-end | center | space-between | space-around | stretch; 属性定义了多根轴线的对齐方式，如果只有一条轴线，那么此属性不起作用 |
|
| 属性/值 | 详细说明 |
| flex-start | 对齐交叉轴的起点 |
| flex-end | 对齐交叉轴的终点 |
| center | 以交叉轴为参考，居中对齐 |
| space-between | 交叉轴两端对齐，轴线这间的间隔平均分布 |
| space-around | Flex项目（沿交叉轴方向）之间的间隔相等 |
| stretch | Flex项目（沿交叉轴方向）占满整个交叉轴 |
| 效果演示 | |
Flex项目属性
| 属性/值 | 详细说明 |
| order | 用于控制Flex项目的排列顺序，默认为0，值越小越靠前。可取的值：0 | 1 |
| flex-grow | 用于定义Flex项目的放大比例，默认为0，即使存在剩余空间，也不放大。可取的值：0 | 1 |
| flex-shrink | 用于定义Flex项目的缩小比例，默认为1，即空间不足，Flex项目将等比缩小。可取的值 0 | 1 |
| flex-basis | 用于定义如何分配多余空间默认值为auto，即Flex项目本来的大小 |
| flex | flex属性是flex-grow，flew-shrink和flex-basis的简写。默认值为0 1 auto |
| align-self | 允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto，表示继承父元素的align-items属性，如果不存在父元素，则等同于 stretch。可取的值：flex-start | flex-end | center | baseline | stretch; |
| stretch | Flex项目（沿交叉轴方向）占满整个交叉轴 |
| 效果演示 | |
Flexbox布局的语法版本
2009版本，我们称之为老版本，使用的是“display:box”或者“display:inline-box”；
2011版本，我们称之为混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”；
2013版本，也就是最新语法版本，使用的是“display:flex”或者“display:inline-flex”。
刚开始研究Flex弹性布局时分不清box，flexbox，和flex的区别还以为他们的作用是不一样的，可后来慢慢收集Flex相关资料时才发现原来他们指的都是同一样东西。
浏览器兼容性
更兼容性细节,可前往Can I use官网查询，传送门：http://caniuse.com/#search=flex
W3C最新版本介绍，传送门：http://www.w3.org/TR/css3-flexbox/
虽然现在浮动布局还比较流行，但随着浏览器的更新换代，我相信未来将会是Flex布局（弹性布局）的天下。因为Flex确实给我们带来了不少的方便，甚至有些效果与传统的布局方式相比，用弹性布局实现起来要简单得多。
参考：http://yunkus.com/article/css3/256.html
更多参考:
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div
CSS：absolute居中 How to center absolute div horizontally using CSS
Bootstrap 3 栏居中 responsive centered columns
Related Posts
About Author
Gideon
3 Comments