flex布局的使用
- 什么是flex布局
- flex容器（父级容器）相关属性
- flex项目（子元素）相关属性
什么是flex布局
Flex布局意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex布局基本概念:
graph TD
flex布局属性--> flex容器相关属性:对整体的项目起作用 -->注意主轴和侧轴方向
flex布局属性--> flex元素相关属性:单独子项目起作用--> 注意主轴和侧轴方向
什么是主轴和测轴
flex布局的使用我们要注意好x轴和y轴的方向，否则会出现布局混乱
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向）
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的（y轴负向）
方向：默认主轴从左向右，侧轴默认从上到下
注意：主轴和侧轴方向是可以被flex-direction改变
可以看图大概了解一下整体内容：
flex容器（父级容器）相关属性
- justify-content
- align-items(单行)
- align-content（多行）
- flex-wrap
- flex-direction
- flex-flow
justify-content主轴上的子元素排列方式
justify-content属性定义了项目在 （x轴）主轴上的对齐方式
注意：使用这个属性前要确定好主轴的方向
| 属性 | 简介 |
|---|---|
| flex-start | 默认值，根据主轴方向头部开始，x轴则从左到右 |
| flex-end | 根据主轴方向从尾部开始 |
| center | 根据主轴方向居中对齐 |
| space-around | 平均分布 |
| space-between | 头尾贴边，中间平均分布 |
代码示范：
align-items测轴上子元素排列方式（单行）
控制子元素在测轴（y轴）上的排列方式
注意：在子元素为单行的时候使用
| 属性值 | 简介 |
|---|---|
| flex-strat | 默认值，从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch（没有设置高度情况下） | 伸缩 |
代码示范：
align-content测轴上子元素排列方式（多行）
设置子项在测轴上的排列方式，且只能用于子元素多行的情况下，也就是flex-wrap：wrap这个属性出现才有作用，单行情况下是无法作用的
| 属性 | 简介 |
|---|---|
| flex-start | 默认值，根据测轴方向头部开始，x轴则从左到右 |
| flex-end | 根据测轴方向从尾部开始 |
| center | 根据测轴方向居中对齐 |
| space-around | 测轴平均分布 |
| space-between | 测轴头尾贴边，中间平均分布 |
| stretch | 子元素高度平分父元素高度 |
代码示范：
flex-direction设置主轴的方向
flex-direction属性决定主轴的方向
注意：
1、 主轴和测轴是会发生变化的，看flex-direction设置谁为主轴，谁为测轴
2、 子元素是跟着主轴来排列的
| 属性值 | 简介 |
|---|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
代码示范：
flex-wrap设置子元素是否换行
默认情况下项目是不会换行的，统一在一条轴上
flex-warp属性定义，flex布局默认不换行
| 属性 | 简介 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
| wrap-reverse | 与测轴反方向换行 |
代码示范：
flex-flow复合属性（flex-direction和flex-wrap）
同时使用flex-direction和flex-wrap的复合属性(没有固定顺序)
代码示范：
flex项目（子元素）相关属性
- align-self
- order
- flex-grow
- flex-basis
- flex-shrink
- flex复合属性（flex-grow、flex-shrink、flex-basis）
align-self控制子元素自己在测轴上的排列方式
align-self属性允许单个项目与其他项目测轴上不一样对齐方式，可以覆盖父级的align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素则为stretch
| 属性 | 简介 |
|---|---|
| auto(默认值) | 表示继承容器的 align-items 属性。 |
| flex-start | 默认值，根据测轴方向头部开始，x轴则从左到右 |
| flex-end | 根据测轴方向从尾部开始 |
| center | 根据测轴方向居中对齐 |
| baseline | 沿着交叉轴方向，按照项目内的文字对齐。 |
| stretch | 沿着交叉轴方向自动进行拉升到最大。 |
代码示范：
order属性定义子元素的排列顺序
数值越小，排列越靠前，默认值为0
注意：和z-index不一样
flex-grow属性定义自身宽度加上剩余空间分配
flex-grow属性定义子元素在父盒子分配剩余空间，用flex-grow的值来表示占有多少份数
属性值为数字，数字为1则表示占有总份数1份，默认值为0
flex计算：总宽度 / 总flex-grow份数 * 子元素对应flex-grow份数==子元素占有剩余空间
代码示范：
flex-basis设置宽度
指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width（宽度始终是basis设置的宽度）
代码示范：
flex-shrink指定flex 元素的收缩规则
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认值是1
代码示范：
flex复合属性
一个属性：flex：（flex-grow：默认值1，初始值0）
两个属性值：
flex：（flex-grow：默认值1）（flex-basis：默认值0%） basis需要带有单位
flex：（flex-grow：默认值1）（flex-shrink：默认值1） 两个属性值都不需要带单位
三个属性值：flex：(flex-grow：默认值1，初始值0) (flex-shrink：默认值1)（flex-basis：默认值0%）
注意：
1、flex-grow和flex-shrink不能为负数
2、flex-basis注意带单位
