flexible box 的简介：
flexbox 是 2009 年 W3C 提出的一种全新的可伸缩的 CSS 布局方式。依赖 flexbox，我们可以更简单，高效的完成可伸缩式页面的布局。flexbox 一共经历了三个版本，分别为 old，tweener，new，这三种版本下的 display 属性值不一样，分别为 "display: box"，"display: flexbox"，"display: flex"。flexbox 中有两个非常重要的概念：flex container（flex 容器） 和 flex item（flex 项目），当我们给一个元素添加一个 "display: flex" 属性后，这个元素就会变成一个 flex container ，它的直接子元素就会变成 flex item 成为一个 flex container 成员。特别是当我们给一个元素设置成 flex container 时，会在文档中生成一个伸缩容器，伸缩容器会为子元素内容生成一个伸缩容器上下文（FFC）。伸缩容器不是块容器，所以 flex item 不能使用那些用来控制块元素布局的属性，例如，clear，float，vertical-align 属性。
PS：flex container 默认存在两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。flex 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
flexbox 的属性分为两类： 一类为 flex 容器的属性，另一类为 flex 项目的属性。
flexbox 容器的属性：
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
flexbox 项目的属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、justify-content 用来设置 flex item 在主轴方向上的对齐方式
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
}
justify-content 属性的值有：flex-start | flex-end | center | space-around | space-between。
flex-start：默认值，flex container 内所有的 flex item 在主轴上按从左至右方向排列（左对齐）；
flex-end：flex container 内所有的 flex item 在主轴上按从右至左方向排列（右对齐）；
center：flex container 内所有的 flex item 在主轴上居中对齐；
space-around：每个 flex item 两侧的间隔相等并且项目之间的间隔比项目与边框的间隔大一倍；
space-between：两端对齐，项目之间的间隔都相等；
2、align-items 用来设置 flex item 在交叉轴方向上的对齐方式
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
}
align-items 属性的值有：flex-start | flex-end | center | baseline | stretch。
flex-start：flex container 内所有的 flex item 在交叉轴上按从上至下方向排列（顶部对齐）；
flex-end：flex container 内所有的 flex item 在交叉轴上按从下至上方向排列（底部对齐）；
center：flex container 内所有的 flex item 在交叉轴上居中对齐；
baseline：所有 flex item 中的第一行文字的基线对齐；
stretch：默认值，如果 flex item 没有设置高度或为 auto，flex item 将会占满整个容器的高度；3、flex-direction 用来设置主轴的方向
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
}
flex-direction 属性的值有：row | row-reverse | column | column-reverse。
row：默认值，主轴在水平方向上，起点在左端；
row-reverse：主轴在水平方向上，起点在右端；
column：主轴在垂直方向上，起点在上沿；
column-reverse：主轴在垂直方向上，起点在下沿；
4、flex-wrap 用来设置 flex item 是否进行多行并反转排列
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
}
flex-wrap 属性的值有：nowrap | wrap | wrap-reverse。
nowrap：默认值，所有的 flex item 排列在一条水平的轴线上，不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方；
5、flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
flex-flow 属性的值有：row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。
6、align-content 属性定义了多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-content: center;
}
align-content 属性的值有：flex-start | flex-end | center | space-around | space-between | stretch。
flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：与交叉轴的中点对齐；
space-around：每根轴线的两侧间隔相等，并且轴线之间的间隔比轴线与边框的间隔大一倍；
space-between：与交叉轴的两端对齐，并且轴线之间的间隔都相等；
stretch：默认值，轴线将占满整个交叉轴；
7、order 属性用于调整 flex item 的顺序（数值越大，排列越靠后）
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
order: 1;
}
order 属性的值有：-1 | 0 | 1 | integer，默认值为 0。8、flex-grow 属性用于定义 flex item 的放大比例（设置负值无效）
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-grow: 1;
}
flex-grow 属性的值：number，默认值为 0，即存在剩余空间也不放大。
PS：如果所有 flex item 的 flex-grow 属性值都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性值为 2，其他项目都为 1，则前者占据的剩余空间将比其他项目多一倍。9、flex-shrink 属性用于定义 flex item 的缩小比例（设置负值无效）
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-shrink: 1;
}
flex-shrink 属性的值：number，默认值为 1，即空间不足该项目将缩小。
PS：如果所有项目的 flex-shrink 属性值都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink 属性值为 0，其他项目都为 1，则空间不足时，前者将不会缩小。
10、flex-basis 属性用于定义 flex item 占据主轴空间的大小
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-basis: 100%;
}
flex-basis 属性的值：length，默认值为 auto，即项目的本来大小。也可以设置固定值，如500px。
特别注意当 flex-basis 值为 0 时 flex item 分配的是容器所有的空间；当 flex-basis 值为 auto 时 flex item 分配的是容器减去所有 flex item 内容之后剩余的容器空间。11、flex 属性是 flex-grow，flex-shrink 和 flex-basis 属性的简写形式，默认值为 0 1 auto
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex: 1 100%;
}
flex 属性的值有两个缩写 none（0 0 auto），auto（1 1 auto）。12、align-self 属性用于设置单个项目与其他的项目不一样的对齐方式，可覆盖容器的 align-items 属性
具体示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
align-self: flex-end;
}
align-self 属性的值有：flex-start | flex-end | center | baseline | stretch | auto。
flex-start：flex container 内所有的 flex item 在交叉轴上按从上至下方向排列（顶部对齐）；
flex-end：flex container 内所有的 flex item 在交叉轴上按从下至上方向排列（底部对齐）；
center：flex container 内所有的 flex item 在交叉轴上居中对齐；
baseline：所有 flex item 中的第一行文字的基线对齐；
stretch：如果 flex item 没有设置高度或为 auto，flex item 将会占满整个容器的高度；
auto：默认值，继承容器的 align-items 属性。如果容器没有该属性，则等同于 stretch；
PS：一个好玩的 flexbox 学习网站：http://flexboxfroggy.com/#zh-cn
flexbox bugs 问题及解决方法：https://github.com/philipwalton/flexbugs
本文出自 “珞辰的博客” 博客，转载请与作者联系！
原文地址：http://luochen2015.blog.51cto.com/9772274/1963849
