Flex布局—语法

传统布局方式：基于盒子模型，依赖display+position+float

W3C在2009年提出了新的方案—Flex布局，目前已得到所有浏览器的支持，可安全使用。

Flex布局即弹性布局，使盒子模型更灵活。

任何容器、行内元素都可以使用Flex布局，在webkit内核的浏览器使用时，需加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

可参考网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

这篇文章写得很详细了，所以我只做一些总结，算是一个记忆和理解过程吧。

首先flex存在两个轴，一个是水平的主轴（main axis），一个是垂直的交叉轴（cross axis）。

一、基本语法

• flex-direction : row | row-reverse | column | column-reverse
• flex-wrap : nowrap | wrap | wrap-reverse
• flex-flow : row nowrap （整合flex-direction和flex-wrap两个属性）
• justify-content
• align-items
• align-content

二、flex-direction  容器内项目排列方向

存在四个结果：row  |  row-reverse  | columns  | columns-reverse

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse ： 主轴为水平方向，起点在右端
• columns ： 主轴为垂直方向，起点在上沿
• columns-reverse ： 主轴为垂直方向，起点在下沿

三、flex-wrap  项目排满一行后，如何换行

存在三个结果：nowrap | wrap | wrap-reverse

• nowrap（默认值）：不换行
• wrap ： 换行，第一行在上方
• wrap-reverse ： 换行，第一行在下方

四、flex-flow 整合了flex-direction和flex-wrap属性

存在12种结果：

• flex-flow:row nowrap （默认值）主轴为水平方向，起点在左端，且不允许换行。
• flex-flow:row wrap  主轴为水平方向，起点在左端，允许换行，第一行在上
• flex-flow:row wrap-reverse  主轴为水平方向，起点在左端，允许换行，第一行在下
• flex-flow:row-reverse nowrap  主轴为水平方向，起点在右端，不允许换行
• flex-flow:row-reverse wrap  主轴为水平方向，起点在右端，允许换行，第一行在上
• flex-flow:row-reverse wrap-reverse  主轴为水平方向，起点在右端，允许换行，第一行在下
• flex-flow:columns nowrap  主轴为垂直方向，起点在上沿，不允许换行
• flex-flow:columns wrap   主轴为垂直方向，起点在上沿，允许换行，第一行在上
• flex-flow:columns wrap-reverse  主轴为垂直方向，起点在上沿，允许换行，第一行在下
• flex-flow:columns-reverse nowrap  主轴为垂直方向，起点在下沿，不允许换行
• flex-flow:columns-reverse wrap   主轴为垂直方向，起点在下沿，允许换行，第一行在上
• flex-flow:columns-reverse wrap-reverse   主轴为垂直方向，起点在下沿，允许换行，第一行在下

五、justify-content  项目在主轴上的对齐方式

存在5种结果

• flex-start 项目左对齐
• flex-end  项目右对齐
• center  项目居中对齐
• space-between  两端对齐，项目之间的间隔相等
• space-around  每个项目两侧的间隔相等，（项目之间的间隔比项目与边框的间隔大一倍）

六、align-items  项目在垂直的交叉轴上的对齐方式

存在5种结果

• flex-start  交叉轴的起点对齐  
• flex-end   交叉轴的终点对齐
• center  交叉轴的中点对齐
• stretch （默认值）  如果项目未设置高度或设为auto，将占满整个容易的高度  
• baseline  项目第一行文字的基线对齐

七、align-content  多行项目时，垂直的交叉轴的对齐方式

存在6种结果

• flex-start 与交叉轴的起点对齐
• flex-end  与交叉轴的终点对齐
• center    与交叉轴的中点对齐
• space-between   与交叉轴的两端对齐，主轴线之间的间隔平均分布
• space-around   主轴线之间的间隔相等（主轴线之间的间隔比主轴线与边框的间隔大一倍）
• stretch （默认值）  主轴线占满整个交叉轴

八、项目属性

共6种项目属性

• order  项目排列顺序，数值越小，排位越靠前（默认值是0，默认顺序）
• flex-grow  项目的放大比例，根据所有项目的比例等分宽度（默认值是0，不被放大）
• flex-shrink  项目的缩小比例，根据所有项目的比例等分宽度（默认值是1，不被缩小）
• flex-basis  项目在主轴上占据固定的空间（默认值是auto，即项目本来大小）
• flex  是flex-grow，flex-shrink，flex-basis的整合（默认值是0 1 auto，快捷键auto(1 1 auto)，快捷键none(0 0 auto)）
• align-self  单个项目的特殊对齐方式，覆盖align-items的属性（默认值是auto，代表继承父元素align-item属性，没有父元素则是默认的stretch）。存在6种结果，auto | flex-start | flex-end | center | baseline | stretch