flex布局
flex被称为万能布局，叫flex布局，也叫盒子布局，其不单是一个flex属性，它包含了一套新的属性集,属性集包括用于设置容器，和用于设置项目两部分。
部分可以 参考这里
容器属性
设置容器的属性有：
display:flex;
flex-direction: row（默认值） | row-reverse | column |column-reverse
flex-wrap: nowrap（默认值） | wrap | wrap-reverse，设置wrap，可以让布局中的元素自动换行（row布局下相当于 flex-flow: row wrap ）
justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly 设置主轴方向上的对齐方式
align-items:stretch（默认值） | center | flex-end | baseline | flex-start 设置次轴方向上的对齐方式
align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly 设置次轴方向上的对齐方式（该控件可能折行显示）
align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch 针对于自己的次轴方向布局，忽略父视图的align-items
设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐方式。
flex-direction 属性，通过设置坐标轴，来设置项目排列方向。
- row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右排列。
- row-reverse：row的反方向。主轴横向，方向为从右指向左。项目沿主轴排列，从右到左排列。
- column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
- column-reverse：column的反方向。主轴纵向，方向从下指向上。项目沿主轴排列，从下到上排列。
项目属性（内部元素属性）
设置项目，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。
order
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数。
.item {
order: 0（默认值） | <integer>
}
flex-shrink 项目收缩因子
当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
.item{
flex-shrink: 1（默认值） | <number>
}
.item1{
width: 120px;
flex-shrink: 2;
}
.item2{
width: 150px;
flex-shrink: 3;
}
.item3{// 项目3未设置flex-shrink，默认flex-shrink值为1
width: 180px;
}
内部权重计算方式(仅供了解)
在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：
item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px
flex-grow 项目扩张因子
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
.item{
flex-grow: 0（默认值） | <number>
}
为了加深理解，我们举个例子：
一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。分别对这项目1和项目2设置flex-grow值为3和1。
.container{
display: flex;
width: 400px; // 容器宽度为400px
}
.item1{
width: 80px;
flex-grow: 3;
}
.item2{
width: 120px;
flex-grow: 1;
}
.item3{
// 项目3未设置flex-grow，默认flex-grow值为0
width: 140px;
}
在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：
item1的最终宽度为：80+ (15 * 3) = 125px
item2的最终宽度为：120 + (15 * 1) = 135px
item3的最终宽度为：140 + (15 * 0) =140px
flex-basis基础值
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
.item{
flex-basis: auto（默认值） | <number>px
}
flex
复合属性，是flex-grow，flex-shrink，flex-basis的简写方式。值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。
.item{
flex: none | auto | @flex-grow @flex-shrink@flex-basis
}
例如： flex: 1 100px; 设置收缩时最小占用100px，然后看情况拉伸延长
例如： flex: 100px 1; 设置扩张时最大占用100px，然后看情况拉伸延长
align-self
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。
.item{
align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch
}
