Flex弹性布局
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位
css
.box{
dispaly: flex; /*任何一个容器都可以指定为Flex布局*/
}
.box{
display: inline-flex; /*行内元素也可以使用flex布局*/
}
.box{
display: -webkit-flex; /* Safari */ /*Webkit内核的浏览器，需要加上-webkit前缀*/
display: flex;
}
容器属性
flex-direction（主轴的方向）
css
.box{
flex-direction: row;
}
row：横向（默认，主轴为水平方向，起点在左端）
row-reverse：横向反向（主轴为水平方向，起点在右端）
column：纵向（主轴为垂直方向，起点在上沿）
column-reverse：纵向反向（主轴为垂直方向，起点在下沿）
flex-wrap（主轴的项目换行）
css
.box{
flex-wrap: wrap;
}
nowrap：不换行（默认，压缩宽度）
wrap：换行
wrap-reverse：换行反序
justify-content（项目在主轴上的对齐方式）
css
.box{
justify-content: space-between;
}
flex-start：默认靠（主轴的）开始对齐，
flex-end：靠（主轴的）结束对齐
center：（主轴）居中对齐
space-between：两端分散对齐（靠着容器内壁，剩余空间平分）
space-around：分散对齐（不靠容器内壁，剩余空间在每个项目两侧平均分配）
space-evenly：平均对齐（不靠容器内壁，剩余空间平分）
align-items（项目在交叉轴上的对齐方式）
css
/*交叉轴(与主轴垂直的轴，针对的是每个item，当每个item高度不一致时才可看出效果) */
.box{
align-items: stretch;
}
flex-start：交叉轴的开始对齐（默认）
flex-end：交叉轴的结束对齐
center：交叉轴的居中对齐
baseline：项目的第一行文字的基线对齐
stretch：拉伸（默认，如果项目未设置高度或设为auto，它将自动拉伸占满。为了拉伸效果只为父元素设置高度）
align-content（项目在交叉轴上的多轴线对齐方式）
css
/*交叉轴（针对容器list的内容整体，多根轴线（多行或多列）的对齐方式，如果项目只有一根轴线，该属性不起作用）*/
.box{
align-content: center;
}
flex-start：交叉轴的开始对齐
flex-end：交叉轴的结束对齐
center：交叉轴的居中对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等
stretch：轴线占满整个交叉轴（默认值）
项目属性
order（排列顺序）
css
.item {
order: 1;
}
/*order默认值是0，值越小排序越靠前*/
flex-grow（放大比例）
css
.item{
flex-grow: 1;
}
/*
对容器中没有占满的剩余空间进行分配
默认0（原大小）；1（剩余的空间分为一份），设置该属性的item放大占据这一整份
也可以每个item均分、不均分（如果其它item也写了该属性那么它也要分一份或多份来占）
*/
flex-shrink（缩小比例）
css
.item{
flex-shrink: 3;
}
/*
当容器主轴 "空间不足" 且 "禁止换行" 时, flex-shrink才有意义
0（当前item不进行缩放，保持原有尺寸）；1（默认，同其它一样缩放）；n（需要计算）；负值对该属性无效
*/
如何计算 ？
总权重TW = item1 * item1的shrink系数 + item2 * item2的shrink系数 + itemn * itemn的shrink系数
需要收缩的总宽度 = item1的宽度 + item2的宽度 + itemn的宽度 - box的宽度
此itemn收缩的宽度 = itemn的宽度 * itemn的shrink系数 / 总权重TW * 需要收缩的总宽度
最后itemn渲染的宽度 = itemn的宽度 - 此itemn收缩的宽度
(图中：box总宽度为600px，每个item的宽度为150px；从左往右的第1个item、第4个item分别设置flex-shrink: 6和flex-shrink: 3)
总权重TW = 150 * 6 + 150 * 1 + 150 * 1 + 150 * 3 + 150 * 1 = 1800
需要收缩的总宽度 = 750 - 600 = 150 px
此itemn收缩的宽度 = 150 * 6 / 1800 * 150 = 75
此itemn收缩的宽度 = 150 * 3 / 1800 * 150 = 37.5
最后渲染的宽度(第1个item) = 150 - 75 = 75px
最后渲染的宽度(第4个item) = 150 - 37.5 = 112.5px
flex-basis（项目占据的主轴空间）
css
.item{
flex-basis:40%; /*设置项目占据的主轴空间*/
}
/*
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
当设置了flex-basis的值并且flex-shrink: 0； width的设置就不起作用了
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
*/align-self（自己单个项目的交叉轴对齐方式）
css
.item{
align-self: center; /*只管自己单个项目的对齐方式（交叉轴）*/
}
auto：继承align-items属性值
flex-start：与交叉轴的开始对齐
flex-end：与交叉轴的结束对齐
center：与交叉轴的居中对齐
baseline：与交叉轴基线对齐(行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐)
stretch：在交叉轴方向上的拉伸
/*
属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素
的align-items属性，如果没有父元素，则等同于stretch。除了auto，其它都与align-items属性完全一致
*/
