CSS3 flex 布局 （转：阮一峰）
新版本
新版本的 Flexbox 模型于 2012 年 9 月提出。
新版本弹性伸缩盒的display属性值：
| 属性值 | 说明 |
|---|---|
flex | 将容器盒模型作为块级弹性伸缩盒显示 |
inline-flex | 将容器盒模型作为内联级弹性伸缩盒显示 |
div {
display: flex;
}注意：设为 Flex 布局以后，flex容器子元素的float、clear和vertical-align属性将失效。
浏览器兼容性
| IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|
| 10+ | 22+ | 21+ | 12.1+ | 6.1+ |
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称：容器
容器的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称：项目
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
- 主轴的开始位置（与边框的交叉点）叫做
main start - 主轴结束位置（与边框的交叉点）叫做
main end - 交叉轴的开始位置叫做
cross start - 交叉轴的结束位置叫做
cross end
项目默认沿主轴排列。
- 单个项目占据的主轴空间叫做
main size - 单个项目占据的交叉轴空间叫做
cross size
属性详解
容器属性
flex-direction
flex-direction属性用于设置项目排列的依据（主轴或交叉轴）
flex-direction: row | column | row-reverse | column-reverse;
- 默认值：
row
| 属性值 | 说明 |
|---|---|
row | 依据主轴排列，起点在左端 |
column | 依据交叉轴排列，起点在右端 |
row-reverse | 依据交叉轴排列，起点在上沿 |
column-reverse | 依据交叉轴排列，起点在下沿 |
flex-wrap
flex-wrap属性定义，如果项目在一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
- 默认值：
nowrap
| 属性值 | 说明 |
|---|---|
nowrap | 不换行，都在一行显示 |
wrap | 自动换行，第一行在上方 |
wrap-reverse | 自动换行，第一行在下方 |
nowrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow
flex-flow属性是flex-direction（排列方向）和flex-wrap（控制换行）的简写形式。
flex-flow: <flex-direction> || <flex-wrap>;
- 默认值：
row nowrap
justify-content
justify-content属性用于设置项目在主轴的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
- 默认值：
flex-start
| 属性值 | 说明 |
|---|---|
flex-start | 项目以主轴左侧对齐 |
flex-end | 项目以主轴右侧对齐 |
center | 项目以主轴中心居中对齐 |
space-between | 项目两端对齐，项目之间的间隔都相等 |
space-around | 项目两端对齐，每个项目两侧的间隔相等 |
align-items
align-items属性用于设置项目在交叉轴的对齐方式。
align-items: stretch | flex-start | flex-end | center | baseline;
- 默认值：
stretch
| 属性值 | 说明 |
|---|---|
stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
flex-start | 项目以交叉轴起点对齐 |
flex-end | 项目以交叉轴终点对齐 |
center | 项目以交叉轴的中点对齐 |
baseline | 项目以第一行文字的基线对齐 |
align-content
align-content属性用于设置多根轴线的对齐方式。
注意：如果项目只有一根轴线，该属性不起作用。
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
- 默认值：
stretch
| 属性值 | 说明 |
|---|---|
stretch | 轴线占满整个交叉轴 |
flex-start | 以交叉轴起点对齐 |
flex-end | 以交叉轴的终点对齐 |
center | 以交叉轴的中点对齐 |
space-between | 以交叉轴两端对齐，轴线之间的间隔平均分布 |
space-around | 以交叉轴两端对齐，每根轴线两侧的间隔都相等 |
项目属性
order
order属性设置项目出现的顺序。
order: <integer>;
- 默认值：
0
flex-grow
flex-grow属性用于设置项目的放大比例（分配剩余空间）
flex-grow: <number>;
- 默认值：
0 - 如果所有项目的
flex-grow属性都为1，则它们将等分剩余空间 - 如果一个项目的
flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink属性用于设置项目的缩小比例（处理溢出空间）
flex-shrink: <number>;
- 默认值：
1 - 如果所有项目的
flex-shrink属性都为1，则当空间不足时，都将等比例缩小。 - 如果一个项目的
flex-shrink属性为0，则空间不足时，该项目不缩小。
flex-basis
flex-basis属性定义了分配多余空间之前，项目占据的主轴空间
flex-basis: auto | <length>;
- 默认值：
auto - 浏览器根据这个属性，计算主轴是否有多余空间。
flex-basis属性设置固定值（例如：350px），则项目将占据固定空间。
flex
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写
flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ]
- 默认值：
0 1 auto
| 属性值 | 说明 |
|---|---|
auto | (1 1 auto) |
none | (0 0 auto) |
align-self
align-self用于单独设置某个项目在交叉轴的对齐方式，可覆盖align-items属性。
align-self: auto | stretch | flex-start | flex-end | center | baseline;
- 默认值：
auto
| 属性值 | 说明 |
|---|---|
auto | 表示继承父元素的align-items属性 |
stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
flex-start | 项目以交叉轴起点对齐 |
flex-end | 项目以交叉轴终点对齐 |
center | 项目以交叉轴的中点对齐 |
baseline | 项目以第一行文字的基线对齐 |
