flex布局

基本概念

Flex布局，也叫"弹性布局"，用来为盒模型提供最大的灵活性

任何一个容器都可以指定为Flex布局
/* 块级元素 */
.box {
   dispaly: flex;
}
/* 行内元素 */
.box {
   dispaly: inline-flex;
}
当父元素被设为flex布局后，子元素的float、clear和vertical-align属性都会失效

采用 Flex 布局的元素，称为 Flex 容器，简称为"容器"，它的所有子元素自动成为容器成员，称为 Flex 项目，简称为"项目"

容器属性

flex-direction 设置容器内项目的排列方向

row 从左向右排列（默认）

row-reverse 从右向左排列

column 从上向下排列

column-reverse 从下向上排列
flex-wrap 设置项目如何换行

nowrap 不换行（默认）

wrap 换行，多余的项目向下一行排布

wrap-reverse 换行，多余的项目向上一行排布
flex-flow flex-direction和flex-wrap的合并形式

flex-flow:

默认：flex-flow: row nowrap;
justify-content 定义项目在主轴上的对齐方式（水平）

flex-start 左对齐（默认）

flex-end 右对齐

center 居中

space-between 两端对齐，两端项目居最右最左，中间项目等距分布

space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍
align-items 定义项目在交叉轴上的对齐方式，只适用于单行元素（垂直）

stretch 如果项目未设置高度或设为auto，将占满整个容器的高度（默认）

flex-start 左上

flex-end 左下

center 居中

baseline 项目的第一行文字的基线对齐
align-items 定义项目在交叉轴上的对齐方式，只适用于单行元素（垂直）

stretch 子元素等分父元素高度（默认）
flex-start 左上

flex-end 左下

center 居中

space-between 两端对齐，两端项目居最上最下，中间项目等距分布

space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍

项目属性

order 定义了项目的排列顺序

默认为0，值越小排列越前

1~N
flex-grow 定义了项目的放大比例

默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间

当其中的一个项目设置了flex-grow为1时，它将占据剩余空间的100%

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

1~N
flex-shrink 定义了项目的缩小比例

默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink默认值1，则空间不足时，等比缩小

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，属性为0的不缩小

如果一个项目的flex-shrink属性为2，其他项目都为1，则前者占据的剩余空间将比其他项少一倍

1~N
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（宽度）

它的默认值为auto，即项目的本来大小

设置了flex-basis以后，就设定了项目的尺寸

width跟flex-basis的区别是，flex-basis的优先级更高。

如果设置的flex-basis的值不为auto，那么width设置什么值都无效，以flex-basis的值为准。只有当flex-basis的值为auto的时候，该项目才会是width设定的值

1~N px
flex flex-grow、flex-shrink和flex-basis的合并形式

flex:

默认：flex-flow: 0 1 auto;

flex: auto; 等同于 flex: 1 1 auto;

flex: none; 等同于 flex: 0 0 auto;

flex: 1;

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

flex: 1; 等同于 flex: 1 1 0%;

flex: 100px;

当flex取值为一个长度或者是一个百分比时，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

flex: 100px; 等同于 flex: 1 1 100px;