前端应知应会：flex布局详解
flex布局能够说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门解说一下。
flex布局全称flexible box布局模型，是一种比拟高效的css3布局计划
通过设置元素的display属性，改成flex属性
.box{ display:flex;}来指定对应容器为flex布局。而后它的所有子元素主动成为了容器元素，不脱离文档流的状况下依照flex item的默认布局规定排列。
首先看下容器的属性：
1、flex-direction
决定主轴的方向，
默认值是row即横向从左往右的程序进行排列。
其余选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不上来的话，如何进行换行
默认是不进行换行，持续沿着主轴方向搁置。
其它选项还有：wrap（换行）、wrap-reverse（换行、然而地位跟wrap相同）
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐形式
默认值是：flex-start即顺着主轴方向排列对齐
其余还有flex-end：逆着主轴方向并从最远处往主轴终点排列
center：居中
space-between：两端对齐，我的项目之间距离相等
space-around：每个我的项目两侧留白间隔相等
5、align-items
该属性定义了我的项目在穿插轴上如何对齐
毕竟，每个item的高度不肯定齐全一样。
它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度
其余还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是，该属性定义的是多跟轴线的对齐形式
该参数有六个可选项：
flex-start、flex-end、center、space-between、space-around、stretch
这外面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的地位会依照上一条轴线上高度最高的item进行计算。
针对item，也有一些属性能够设置
1、order决定了我的项目的排列程序，能够通过设置该属性将对应的item往前排列
2、flex-grow，决定了item的放大比例，默认为0不进行放大。
3、flex-shrink，定义了item的放大比例，默认为1，如果空间不够的话所有轴线上的item将进行同比放大，如果为0则该item不进行放大
4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item本身的宽度进行调配
5、align-self。定义item在轴线纵向的排列形式，能够替换掉对应flex容器的align-items属性，为该item设置专门的对齐形式
上面再举个例子
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="container"> <div class="item1">1111111</div> <div class="item" style="height:50px;">22</div> <div class="item3">333</div> <div class="item">44</div> <div class="item5"> 555 </div> 6 </div> <script> </script></body><style> .container { display: flex; width: 60px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; } .item { background-color: brown; } .item5 { position: absolute; top: 30px; left: 20px; } .item3 { align-self: flex-end; height: 20px; }</style></html>