Flex布局

一、Flex布局是什么？

Flex布局意为“弹性布局”，可以为盒模型提供最大灵活性。
任何元素可以通过以下指定为弹性布局：

( -webkit- )display: flex | inline-flex;

被指定为弹性布局以后，float、clear、vertical-align属性都将失效。

二、基本概念

• 容器：采用Flex布局的元素；
• 项目：所有子元素自动成为容器成员，这些元素组成一个Flex项目（item），简称“项目”；
• 主轴：水平方向上的(main start->main end)；
• 交叉轴：垂直方向上的(cross start->cross end)。

三、容器属性

• flex-direction：
  决定主轴方向。

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

主轴从左向右 |主轴从右向左 | 主轴垂直从上到下 | 主轴垂直从下到上

• flex-wrap：
  项目超过轴线，换行方式。

flex-wrap：nowrap | wrap | wrap-reverse;

• flex-flow：
  主轴方向和换行方式的合并。

flex-flow: <flex-direction> || <flex-wrap>;

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• justify-content：
  在主轴上的对齐方式。

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

开始对齐 | 结束对齐 | 中间对齐 | 两端对齐 | 等距离对齐（类似于每个项目的margin相同，平分空余）

• align-items：
  在交叉轴上的对齐方式。

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

开始对齐 | 结束对齐 | 中间对齐 | 项目未设置高度，将设置为auto充满容器高度 | 项目第一行文字基线对齐

• align-content：
  对条主轴线的对齐方式。

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

交叉轴起点对齐 | 交叉轴重点对齐 | 交叉轴中点对齐 | 交叉轴两端对齐，轴线间隔平均分布 | 轴线两侧间隔相等 （类似于每个项目的margin相同） | 轴线占满整个交叉轴（轴线之间间隔相同）

四、项目属性

• order：
  定义顺序，数字越小，排列越靠前，默认0。

order: <integer>;

• flex-grow：
  定义项目的放大比例，默认为0，不放大。

flex-grow: <number>;

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。（该属性待实践）

• flex-shrink：
  定义项目的缩小比例，默认为1，空间不足将缩小。为0时不缩小。

flex-shrink: <number>;

• flex-basis：
  定义项目分配多余空间时，占据主轴的空间，可以用来计算主轴是否有空余空间。默认值为auto。

 flex-basis: <length> | auto; 

• flex：
  flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。
  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

• align-self：
  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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