什么是Flex布局？

Flex布局

别名：弹性布局、
一、使用方法
在需要开启flex布局的元素（father）添加样式

<style>
.father{
display: flex;
}
</style>

二、关键属性
1. flex-wrap 换行属性（是否换行）
取值：
nowrap(默认) | wrap| wrap-reverse
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。
效果：

2. justify-content属性（主轴）

取值：
flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在主轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
效果：

3. align-items属性（交叉轴排列方式）
取值：
flex-start | flex-end | center | baseline | stretch(默认)

flex-start会让项目在交叉轴紧贴容器顶部，flex-end与之相反
center在交叉轴中心位置排列
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列

效果：

4. align-content（多行项目）
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
效果
效果和justify-content设置的一样，只不过方向换了

三、其它属性

1.order（排列顺序）
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow（剩余空间的分配）
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大（剩余空间的分配）；注意，即便设置了固定宽度，也会放大。

3.flex-shrink（缩小）
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

4.flex-basis（覆盖widtn属性）
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

5.align-self（自我设置）
前提：父容器有align-items属性

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。