Flex布局精要

Flex 布局详情请参考阮一峰大神的文章：

Flex 布局教程：语法篇 - 阮一峰的网络日志

Flex 布局教程：实例篇 - 阮一峰的网络日志

Flex 布局示例

本文仅作为总结笔记参考

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

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

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

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

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

一、容器属性

• flex-flow 整合flex-direction和flex-wrap两个属性
• justify-content  主轴上的对齐方式
• align-items  交叉轴上的对齐方式
• align-content  多根轴线时在交叉轴上的对齐方式

1、flex-direction 

容器内项目排列方向，即主轴方向

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

2、flex-wrap

项目排满一行后，主轴如何换行

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

3、flex-flow

整合了flex-direction和flex-wrap属性

示例：flex-flow: row nowrap

4、justify-content 

项目在主轴上的对齐方式

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

5、align-items 

项目在交叉轴上的对齐方式

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

6、align-content 

多行项目时，交叉轴的对齐方式

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

二、项目属性

1、order 

项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow 

项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

3、flex-shrink 

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

4、flex-basis 

项目在主轴上占据固定的空间（默认值是auto，即项目本来大小）

5、flex 

是flex-grow，flex-shrink，flex-basis的整合，默认值是0 1 auto，快捷值是 0。

该属性有3个快捷值：

• flex:auto (1 1 auto)
• flex:none(0 0 auto)
• flex:1 (1 1 0%)

6、align-self 

单个项目的特殊对齐方式，覆盖align-items的属性（默认值是auto，代表继承父元素align-item属性，没有父元素则是默认的stretch）。

存在6种结果，auto | flex-start | flex-end | center | baseline | stretch