CSS3-Flexbox

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为Flex）。

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。

最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性。

基本要素

因为Flexbox是整个模块，而不是一个属性，它涉及很多东西，包括其整个组属性。他们当中一部分是容器（父元素，称为“伸缩容器”），另一部分是子元素（称为“伸缩项目”）。


主轴：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的；这主要取决于“justify-content”属性（row/column）

侧轴：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。

属性

display: flex | inline-flex (用于伸缩容器)

这个是用来定义伸缩容器，是内联还是块取决于设置的值。这个时候，他的所有子元素将变成flex文档流，称为伸缩项目

flex-direction（用于伸缩容器）

这个主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向。

flex-direction: row | row-reverse | column | column-reverse

flex-wrap (用于伸缩容器)

这个主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse

flex-flow（用于伸缩容器）

这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content（用于伸缩容器）

这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around


align-items（用于伸缩容器）

用来定义伸缩项目在侧轴上对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

align-content (用于伸缩容器)
用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。


align-content: flex-start | flex-end | center | space-between | space-around | stretch

order（用于伸缩项目）

默认情况下，伸缩项目是按照文档流出现先后顺序排列。然而，“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

align-self（用于伸缩项目）

用来在单独的伸缩项目上覆写默认的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch

实战

左右垂直居中

.parent{
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 100px;
height: 100px;
}

第二方案：

.parent{
background: #eee;
height: 200px;
display: flex;
/*justify-content: center;
align-items: center; */
}
.child{
background: #333;
width: 100px;
height: 100px;
/* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。 */
margin: auto;
}

代码欣赏

body {
display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
display: -moz-box;    /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;  /* 混合版本语法: IE 10 */
display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

/*垂直居中*/
/*老版本语法*/
-webkit-box-align: center;
-moz-box-align: center;
/*混合版本语法*/
-ms-flex-align: center;
/*新版本语法*/
-webkit-align-items: center;
align-items: center;

/*水平居中*/
/*老版本语法*/
-webkit-box-pack: center;
-moz-box-pack: center;
/*混合版本语法*/
-ms-flex-pack: center;
/*新版本语法*/
-webkit-justify-content: center;
justify-content: center;

margin: 0;
height: 100%;
width: 100% /* needed for Firefox */
}
/*实现文本垂直居中*/
h1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

height: 10rem;
}

转载: 一个完整的Flexbox指南

参考：/article/1214392.html