Flex容器与项目的常用属性说明
1.flex有两个轴一个是主轴一个是交叉轴
2.将容器转为flex之后容器中的子元素会自动转为flex项目（亦或flex元素）
3.将容器转为flex弹性盒子之后项目自动转为行内块（水平排列、支持高宽）
4.项目默认水平方向排列
5.当项目的宽度之和大于或小于容器宽度之和的时候会自动收缩
6.当设定为可换行时项目始终沿主轴方向排列，沿交叉轴方向换行
7.当所有项目不能完全充满主轴空间，会产生剩余空间，剩余空间永远处于主轴方向
用法
/* 将容器转为flex弹性盒容器 */
display: flex;
/* 将元素设为不换行 */
flex-wrap: nowrap;
/* 将元素设为换行显示 */
flex-wrap: wrap;
/* 默认主轴方向行，项目是走左到右 */
flex-direction: row;
/* 改变项目在主轴上的排列顺序，倒序 */
flex-direction: row-reverse;
/* 改变项目在主轴上的排列顺序，垂直 */
flex-direction: column;
/* 改变项目在主轴上的排列顺序，垂直并倒序 */
flex-direction: column-reverse;
/* 简写 */
/* 主轴水平，不换行 */
flex-flow: row nowrap;
/* 主轴水平，换行 */
flex-flow: row wrap;
/* 主轴垂直，不换行 */
flex-flow: column nowrap;
/* 主轴垂直，换行 */
flex-flow: column wrap;
注释
<!-- container 为flex容器 -->
<div class="container" style="display: flex;">
<!-- item 为flex项目 -->
<div class="item">1</div>
<div class="item">2</div>
</div>
Flex项目单行容器的对齐方式说明
1.只有在有剩余空间的情况下对齐才有意义
2.项目不换行叫单行容器
用法
/* flex-start,flex-end是将所有项目作为一个整体在主轴上进行对齐 */
/* 设置项目在主轴上的对齐方式 */
/* 默认：与主轴的起始线对齐 */
justify-content: flex-start;
/* 与主轴的终止线对齐 */
justify-content: flex-end;
/* 与主轴的中间对齐 */
justify-content: center;
/* 将剩余空间在每个项目之间进行分配 */
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content: space-around;
/* 平均对齐 */
justify-content: space-evenly;
/* flex-start,flex-end是将所有项目作为一个整体在交叉轴上进行对齐 */
/* 设置项目在交叉轴上的对齐方式 */
/* 默认：与交叉轴的起始线对齐 */
align-items: flex-start;
/* 与交叉轴的终止线对齐 */
align-items: flex-end;
/* 与交叉轴的中间对齐 */
align-items: center;
Flex项目多行容器的对齐方式说明
用法
/* 项目在多行容器中的对齐方式 */
/* 项目在交叉轴上默认会拉伸占满全部空间 */
/* 如果设置了项目高度则自定义值优先级较高 */
align-content: stretch;
/* 将所有的换行显示的项目当成一个整体在整个交叉轴上进行对齐 */
/* 沿起始线对齐 */
align-content: flex-start;
/* 沿终止线对齐 */
align-content: flex-end;
/* 沿居中对齐 */
align-content: center;
/* 将交叉轴上的剩余空间在每一行的项目上进行分配 */
/* 两端对齐 */
align-content: space-between;
/* 分散对齐 */
align-content: space-around;
/* 平均对齐 */
align-content: space-evenly;
Flex项目在主轴上的顺序显示
1.order：值越小，越靠前显示
2.只有在单行容器中使用才有意义
用法
/* 每个项目在主轴的默认顺序与书写顺序一致 */
order: 0;
/* 选中第一个item将其排序设为2 */
.item:first-of-type {
order: 2;
}
/* 设置某一个项目具体的对齐方式 */
/* 选中第一个item将其向上对齐 */
.item:first-of-type {
align-self: flex-start;
}
/* 选中第三个item将其向下对齐 */
.item:nth-of-type(3) {
align-self: flex-end;
}
Flex项目的放大因子
1.放大因子只有在主轴上存在剩余空间的情况下才有效
用法
/* 假定增长因子之和为3，每个项目增长因子为1，剩余空间为150PX */
/* 每个项目分的空间为 150/3=50PX */
/* 根据每个项目的增长因子计算实际应该增长的大小 */
/* 选中第一个item项目将其增长因子设为1 */
.item:first-of-type {
flex-grow: 1;
}
/* 选中第二个item项目将其增长因子设为1 */
.item:nth-of-type(2) {
flex-grow: 1;
}
/* 选中最后一个item项目将其增长因子设为1 */
.item:last-of-type {
flex-grow: 1;
}
Flex项目的收缩因子
1.一定是空间不足才会引起收缩
用法
/* 与放大因子同理 */
flex-shrink: 1;
Flex项目的计算尺寸
用法
/* 当主轴水平时width有效 */
/* 当主轴垂直时height有效 */
/* min-width主轴水平有效 */
/* min-height主轴垂直有效 */
/* 默认，使用用户自定义的值 */
flex-basis: auto;
/* 自定义计算尺寸，优先级大于width */
/* min-width,min-height优先级大于自定义计算尺寸（flex-basis） */
/* 以水平时举例，优先级链 width < flex-basis < min-width */
/* 将其宽度手动设为70PX */
flex-basis: 70px;
Flex-grow,Flex-shrink,Flex-basis 缩写 Flex
1.flex 的第一个值是flex-grow 第二个值是flex-shrink 第三个值是flex-basis
用法
/* flex-grow,flex-shrink,flex-basis 缩写 flex */
/* flex 的第一个值是flex-grow 第二个值是flex-shrink 第三个值是flex-basis */
/* 允许放大，允许缩小，宽度自动 */
flex: 1 1 auto;
/* 允许放大，允许缩小，宽度自动 缩写 */
flex: auto;
/* 让他失去弹性 */
flex: 0 0 auto;
/* 实际让项目具备完整弹性 */
flex: 1;
/* flex 默认：禁止放大，允许收缩 */
flex: initial;
flex: 0 1 auto;
/* 禁止收缩 */
flex: none;
flex: 0;
