flex布局

一、什么是flex?

1.含义：flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思。

2.作用：可以为开发者省去测量盒子大小的繁琐步骤，项目元素（item）盒子根据容器(container)的大小，利用伸缩、排列等各种方法，让item小盒子在页面中弹性布局。

二、flex的基础知识

1.container属性（6个）

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了是否换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴元素对齐方式//多行

1.1flex-direction（设置主轴方向）

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

举例如下：

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: nowrap;

flex-wrap: wrap;

1.2flex-wrap（设置item元素一行占满空间是否允许换行）

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

flex-wrap: nowrap;

flex-wrap: wrap;

1.3flex-flow（flex-direction与flex-wrap属性的复合写法）

flex-flow: row wrap;

1.4justify-content（设置主轴方向上item的排列方式）

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

1.5align-items（设置交叉轴方向上item的排列方式 单行）

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

 align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

1.6align-content（设置item元素在多行排列下交叉轴方向上item的排列方式 多行）

flex-start (每一行)(默认)靠着cross-start对齐
flex-end   （每一行)靠着cross-end对齐
center     (每一行)靠着cross线居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个**项目二侧**平均分配
strentch      (每一行)伸缩，占满整个高度

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

2.item属性（5个）

2.1flex-grow

设置 flex 项 主尺寸 的 flex 增长系数。
规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。
默认值为：0

2.2flex-shrinik

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。（当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义）
默认值为：1 允许缩放
0 禁止缩放（即设定的宽高大小）

2.3flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
默认值为：auto
暂时不是太理解（http://www.javascriptcn.com/post/6453054f968c7c53b077948f）

2.4order

将元素重新排序。
默认值为：0

数值越小，位置越靠前。

2.5align-self

该属性可覆盖容器的align-items, 用以自定义某个item的对齐方式。

3.flex:1

flex:1 相当于 {flex-grow:0; flex-shrink:1; flex-basis:auto;}