Flex简介
ul {
display: flex;
}
那么ul下的li将自动成为flex容器的项（li下的元素不会受到影响），默认情况下flex容器的方向为x轴正方向，这会使得ul下的li从左至右无缝排列。基础特性如下：
- 默认情况下，同一行/列中flex元素的高始终保持一致，如果某个元素高度/宽度大于其他元素，那么下一行/列将从以最大宽度/高度进行排列
- 默认情况下，当行无法装载flex元素时会对元素进行缩放，此时flex元素的宽度将失效。
flex-direction
ul {
display: flex;
flex-direction: row-reverse;
}
flex-direction用于指定排列的方向（注意是排列方向，而不是flex元素的排列顺序）。以上代码会使得li在x轴上反转，从右至左进行排列。全部取值如下
- row: x轴正方向（默认）
- row-reverse: x轴反方向，flex元素顺序也会反转
- column: y轴正方形
- column-reverse: y轴反方向，flex元素顺序也会反转
-
unset: 设置为默认值
微信截图_20191120193124.png
flex-wrap
ul {
display: flex;
flex-wrap: wrap;
}
flex-wrap说明在排列方向上装不下时如何处理。取值如下：
- nowrap: 不换行（默认），flex元素的高度默认为100%（因为align-content和align-items默认为stretch）
- wrap: 换行，新行沿Y轴往下增，此时flex元素的高度自动计算（总高度/行数）（由align-items决定）
-
wrap-reverse: 换行，新行沿Y轴往上增，此时flex元素的高度自动计算（总高度/行数）（由align-items决定）
微信截图_20191120194409.png
flex-flow
ul {
display: flex;
flex-flow: row nowrap;
}
flex-flow是flex-direction和flex-wrap的简写属性，默认值为row nowrap
justify-content
ul {
display: flex;
justify-content: flex-end;
}
justify-content说明每根Y轴在X轴上的对齐方式，取值如下：
1、 flex-start：左对齐（默认），如|ABC |
2、flex-end：右对齐，如| ABC|
3、center：居中，如| ABC |
4、space-between：两端对其，距离两端为0px，flex元素之间等距，如|A B C|
5、space-around：flex元素两侧等距，这会导致第一项和最后一项的左间距和右间距至右flex元素之间的间距的一半，如| A B C |
6、space-evenly：flex元素之间和两端等距，如| A B C |
align-content
ul {
display: flex;
align-items: flex-start;
align-content: flex-start;
}
align-content定义每根X轴在Y轴上的对齐方式（flex-wrap为nowrap时不生效），取值如下：
-
flex-start：以Y轴的起点对齐
微信截图_20191120202053.png -
flex-end：以Y轴的终点对齐
微信截图_20191120202208.png -
center：以Y轴对齐
微信截图_20191120202246.png space-between：Y轴上两端对齐
space-around：X轴轴距相等，Y轴两端距离仅有轴距的一半
space-evenly：X轴与两端的距离均相等
stretch：轴高度自适应（等高）（默认值）
align-items
ul {
display: flex;
align-items: flex-start;
align-content: flex-start;
}
align-items说明flex元素在当前X轴内Y轴方向上如何对齐，如在Y轴的对齐起点、元素高度等，取值如下：
- flex-start：行在Y轴上的起点对齐
- flex-end：行在Y轴上的终点对齐
- center：flex元素在Y轴上居中
- baseline：flex元素中的首行文字底部对齐
- stretch：Y轴上平铺（设定为行高）（默认值）
flex元素的属性
- flex元素修改display值时将失效，即使添加!important关键字。
flex-grow
flex-grow定义如何分配剩余空间，这里的剩余空间指的是除了flex元素占据的宽度以外，flex容器剩下的宽度。默认情况下不分配。取值为数值（倍数，相对其他而言占用的比例），默认为0，即不分配。取值相同时为平均分配。
flex-shrink
flex-shrink定义如何缩放，当宽度不够时定义如何缩放。取值为数值，默认为1，表示所有元素等比例缩放。如果取值为0，则表示不缩放。
flex-basis
li {
flex-basis: 300px;
}
flex-basis定义元素宽度，默认值为auto，即元素本身的宽度，可使用固定值。
flex
flex为flex-grow, flex-shrink, flex-basis的简写（推荐使用，因为浏览器会自动推算值）
align-self
align-self定义某个flex元素的对齐方式，除了auto值外，其他取值与align-items保持一致。
常见布局
内容等分
li {
flex-basis: 100%;
// width: 100%;
}
以上两种方式均可行
其他内容自适应
.left { width: 300px; flex-shrink: 0;}
li { width: 100%; flex-shrink: 1;} // 宽度为100%，此时会自动进行缩放
未知宽高对齐
第一种方式：
ul {
display: flex;
justify-content: center; // Y轴居中
align-content: center; // X轴居中
flex-wrap: wrap; // 使align-content生效
}
第二种方式：
ul {
display: flex;
justify-content: center; // Y轴居中
align-items: center; // 设置元素在轴内Y轴方向上居中，因为align-content默认为stretch，所以轴高为100%
}
