使用方式：
在需要使用flex 的样式表的选择器中设置 display:flex;
html{
display: flex;
}
在父标签上需要设置的内容：
1、主轴方向
html{
display: flex;
flex-direction: ...;
}
flex-direction 的取值：
| value |
描述 |
| row |
主轴为横向，方向为从左往右 |
| row-reverse |
主轴为横向，方向为从右往左 |
| column |
主轴为纵向，方向为从上到下 |
| column-reverse |
主轴为纵向，方向为从下到上 |
| inherit |
从父标签继承 |
2、子标签在主轴上的对齐方式：
html{
justify-content: ...;
}
justify-content 的取值：
| value |
描述 |
| flex-start |
从主轴的开始端对齐 |
| flex-end |
从主轴的结束端对齐 |
| center |
在主轴上居中对齐 |
| space-around |
在主轴上平局分布，有等宽的间距环绕在元素两端 |
| space-between |
起始和结束位置的元素会紧贴父标签的边缘，中间部分的元素等分间距 |
| inherit |
从父标签继承 |
3、子标签在副轴（与主轴垂直的交叉轴）上的对齐方式
html{
align-items: ...;
}
align-items 的取值：
| value |
描述 |
| flex-start |
从副轴的开始端对齐 |
| flex-end |
从副轴的结束端对齐 |
| center |
在副轴上居中对齐 |
| baseline |
元素的第一行文字的基线对齐 |
| stretch |
如果元素没有设置宽/高或者auto ，此值会让元素占满父元素的宽/高 |
| inherit |
从父标签继承 |
4、设置子元素是否换行:
html{
flex-wrap: ...;
}
flex-wrap 的取值：
| value |
描述 |
| nowrap |
不换行 |
| wrap |
换行 (换行，意味着出现了多条主轴, align-content 生效) |
| wrap-reverse |
换行，并且第一行在下方(同上) |
5、设置多个主轴的对齐方式：
html{
// 当 align-content 生效，也就是存在了多条主轴的情况下，可以把每条主轴上的元素看为一个整体，每个整体在副轴上进行排列.
// 以下设置每个值的效果就等同于子标签在主轴上的对齐效果（把轴线看做一个整体，多个整体的对齐效果）
// 比较绕，其实就跟在主轴上显示子元素一样，但实际上是在副轴上对齐的主轴。
align-content: ...;
}
align-content 的取值：
| value |
描述 |
| flex-start |
从副轴的开始端对齐 |
| flex-end |
从副轴的结束端对齐 |
| center |
在副轴上居中对齐 |
| space-around |
在主轴上平局分布，有等宽的间距环绕在元素两端 |
| space-between |
起始和结束位置的元素会紧贴父标签的边缘，中间部分的元素等分间距 |
设置在子标签上的属性
1、设置元素的排列顺序：
div {
// order 取值是无单位的整数，数值越小，该元素的位置就越靠前，默认为 0
order: ...;
}
2、设置元素占用父标签的范围大小：
div {
// flex 是 flex-grow, flex-shrink, flex-basis 的简写，默认值为 0 1 auto ；后两个值可选，可以只设置前一个的值，为无单位的整数；
// 可以理解为把父标签等分了多个子元素 flex 值得总和的份数，每个子元素的 flex 值就代表了该元素占了父标签份数的比例
flex: ...;
}
3、设置单个元素的对齐方式，脱离同级标签的对齐方式（让某一个子元素显得比较另类）
div {
// 当设置了这个属性，可以理解为在他的父标签上设置的 align-items 对应值的效果，单独应用到了该元素
align-self: ...;
}
align-self 的取值：
| value |
描述 |
| flex-start |
从副轴的开始端对齐 |
| flex-end |
从副轴的结束端对齐 |
| center |
在副轴上居中对齐 |
| baseline |
元素的第一行文字的基线对齐 |
| stretch |
如果元素没有设置宽/高或者auto ，此值会让元素占满父元素的宽/高 |
以上便是个人对 flex 的简单理解，欢迎指正。
