弹性布局 Flexible Box

页面中任何一个元素都可以指定为 弹性布局(Flex)

属性：display

取值：

1、flex     将块级元素变为弹性布局容器

2、inline-flex   将行内元素变为弹性布局容器

兼容性:    display:-webkit-flex;

注意：将元素设置为flex后，子元素的 float，clear以及vertical-align属性将失效

子元素有两条轴

Main axsis : 主轴，默认为横向轴

Cross axsis : 交叉轴，默认为纵向轴

容器（父元素）可以设置容器属性，用于控制子元素的排列方式

1、flex-direction  指定轴的方向

1. row（主轴为横轴，起点在左端，默认值）

2.row-reverse 主轴为横轴，起点在右端

3.column 主轴为交叉轴（纵轴），起点在顶端

4.column-reverse 主轴为交叉轴（纵轴），起点在底

2、flex-wrap   一行内显示不下所有项目时，如何换行

1.nowrap  默认值，不换行，会将项目等比缩放

2.wrap  换行

3.wrap-reverse  换行，第一行在下方（从下往上的意思，如图）

3、flex-flow  是 flex-direction 和 flex-wrap的缩写 （默认值为row nowrap）

4、justify-content  定义了子元素在主轴上的对齐方式

1.flex-start   主轴的起点对齐

2.flex-ecenternd   主轴的终点对齐

3.center  居中对齐

4.space-between  两端对齐，每两个项目之间的间隔相等（个人认为常用属性值）

5.space-around  每个项目两侧的间隔距离是相等的（有坑，别踩，不是字面上的意思，如图）

5、align-items  子元素在交叉轴上是如何排列对齐的（主要针对一行容器）

1.flex-start    交叉轴起点对齐（如图）

2.flex-end    交叉轴终点对齐

3.center    交叉轴中间对齐

4.baseline  基线对齐，第一行文本的基线(下方)

5.stretch  默认值，如果项目未设置高度或高度为auto时，那么将占满整个容器的高度

6、align-content    容器具备多跟轴线时(自动换行时)，项目的对齐方式

1.flex-start  项目在交叉轴起点对齐（和上面那个属性差不多，不同的是前一个是适用于只有一行容器，这个是适用于多行）

2.flex-end  项目在交叉轴终点对齐

3.center  项目在交叉轴中间对齐

4.space-between  与交叉轴两端对齐,轴线之间的间隔相等

5.space-around  每个轴线两端的间隔相等，轴线间间隔比轴线与父元素边框间隔大一倍

6.stretch  默认值，在不指定项目高度时，占满整个交叉轴

项目（子元素）属性

1.order  排序，定义项目的排列顺序。值越小，越靠前

2.flex-grow    放大比例，如果当前排列轴有空余空间，项目将如何放大

默认值为 0 ，不做任何放大处理（注意没有负数）

只有一个元素取值为1的元素，在有剩余空间时，将占满剩余的空间

有多个元素取值为1的时候，有剩余空间时，大家平分剩余空间

3.flex-shrink   项目的缩小比例，默认为1，即空间不足时，等比缩小（同上）

4.flex-basis　　项目所占据的空间大小

1.auto  默认值，项目本身大小

2.length，指定 宽 或 高(取决于主轴的方向)

5.align-self    单独定义当前元素与其他元素不一样的交叉轴对齐方式，可以覆盖align-items的值。默认为 auto，即继承父元素的align-items

1.auto 自动，继承父元素align-items

2.flex-start   交叉轴起点

3.flex-end  交叉轴终点

4.center   交叉轴中间

5.baseline   基线对齐

6.stretch  在不指定项目高度时，占满整个交叉轴