flex的缩写
flex: 分配弹性盒容器的剩余空间(份数)
flex其实三个属性的属性的缩写
这三个属性默认值为 0% 0 1
flex-basis: 基准值
参与计算的最终值
auto 自动（ 即项目的宽度（主轴占位））
如果，宽度和 flex-basis同时存在，以flex-basis占位为准
参与计算：项目的最终占位，剩余空间的计算，增长和收缩的计算
flex-grow: 增长比率
默认 0 不增长
只有容器有剩余空间时有效
容器盒子的剩余空间分成几份，给到元素
flex-shrink 收缩比率
默认 1
不收缩 0
只有容器内容超出时有效
关于flex常用属性
容器 设置为弹性盒的元素
项目 弹性盒的子元素
主轴 默认主轴方向从左向右
侧轴（交叉轴）：默认主轴方向从上向下
弹性容器外及弹性子元素内是正常渲染的。
弹性盒子只定义了弹性子元素如何在弹性容器内布局
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
(1)开启弹性盒
设置为弹性盒容器:
display:flex 块级弹性盒
inline-flex 行级弹性盒（ 内联块）
(2)flex-direction: 改变主轴方向
flex-direction: 改变主轴方向
（项目排列方向）
row 横向排列（默认从左向右）
row-reverse 横向排列（从右向左）
column 纵向排列（默认从上向下）
column-reverse （从下向上）
(3)justify-content: 项目主轴方向的对齐方式
justify-content: 项目主轴方向的对齐方式
flex-start：起始位置对齐
flex-end：末端位置对齐
center：居中对齐
space-between：【空白在之间】两端对齐
弹性项目平均分布在该行上,相邻项目之间间隔相等
space-around：【空白围绕在两侧】分散对齐
弹性项目平均分布在该行上，项目两侧拥有相等间隔空间
(4)align-items: 项目侧轴方向的对齐方式
align-items: 项目侧轴方向的对齐方式
flex-start：侧轴起始位置对齐
flex-end：侧轴末端位置对齐
center：居中对齐
baseline：基线对齐。
stretch：拉伸占满容器
如果指定侧轴大小的属性值为'auto'，
则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
(5)flex-wrap: 项目是否换行
flex-wrap: 项目是否换行
nowrap 不换行
wrap 换行（默认起始位置在上）
wrap-reverse 反转换行(默认起始位置在下)
(6) align-content: 多根轴线之间的对齐方式（项目为多行时有效）
align-content: 多根轴线之间的对齐方式（项目为多行时有效）
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，
两端保留子元素与子元素之间间距大小的一半。
(7) order:排列次序
默认0
值越大排列越靠后
值相同时，按结构先后顺序排列
<style>
.wrap{width: 400px;height: 400px;border:1px solid red;display:flex;}
.box{width:100px;height:100px;background:pink;}
.box:nth-child(1){order:3;}
.box:nth-child(2){order:1;}
.box:nth-child(3){order:1;}
</style>
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
order
(8) align-self: 弹性盒单个项目在侧轴方向的对齐方式
auto：为元素的父元素的'align-items'值，
flex-start：弹性盒子元素侧轴起始边对齐。
flex-end：弹性盒子元素侧轴结束对齐
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline：该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<style>
.wrap{width: 400px;height: 400px;border:1px solid red;
display:flex;align-items: flex-end;
}
.box{width:100px;height:100px;background:pink;}
.box:nth-child(1){align-self: flex-start;}
.box:nth-child(2){align-self: center;}
.box:nth-child(3){align-self: stretch;height:auto;}
</style>
(9)关于flex:
flex: 分配弹性盒容器的剩余空间
（份数）
flex实际上是三个属性的缩写
flex-basis: 基准值
flex-grow: 增长比率
flex-shrink 收缩比率
这三个属性默认值为 0% 0 1
(一)关于flex-grow增长比率
<style>
.wrap{
width: 400px;
height: 400px;border:1px solid red;
display:flex;
}
.box{width:100px;height:100px;}
.box:nth-child(1){background:pink;flex-grow:1;}
.box:nth-child(2){background:yellowgreen;flex-grow:2;}
.box:nth-child(3){background:skyblue;flex-grow:3;}
</style>
(二)关于flex-basis增长比率
.box:nth-child(1){background:pink;flex-grow:1;flex-basis: 50px;}
.box:nth-child(2){background:yellowgreen;flex-grow:2;}
.box:nth-child(3){background:skyblue;flex-grow:3;}
/* 150/6=25 */
这时候box1的width为75px,box2的width为150px,box3的width为175px
(三)关于flex-shrink收缩比率
.box{width:100px;height:100px;}
.box:nth-child(1){background:pink;flex-shrink: 1;flex-basis: 50px;}
.box:nth-child(2){background:yellowgreen;flex-shrink:2;}
.box:nth-child(3){background:skyblue;flex-shrink:3;}
.box:nth-child(4){background:orange;flex-shrink:4;}
47.36从和得来?
50*1+100*2+100*3+100*4 = 950
【多余空间】 350-300
50*1 / 950 = 0.05263157 * 50 = 2.63157
100*2 / 950 = 0.210526 * 50 = 10.5263
100*3 / 950 = 0.315789 * 50 = 15.7894
....
50-2.63157 = 47.36
