flex布局--------新理解
flex布局： 弹性布局（Flexible布局）
flex内的元素概念：
1. main start ： 起始位
2. main end ： 结束位
3. main axis ： 主轴
4. cross axis ： 交叉轴
两个重要的概念：
1. 开启flex布局的元素叫flex container
2. flex container 里面的直接子元素叫做flex items
开启flex布局：
块级元素： display：flex
行内元素： display：inline-flex
flex container ====》（个人理解：flex容器）
应用在 flex container（容器内）的属性：
flex-flow ：是flex-direction 和 flex-wrap的简写
可以写两个参数 例子： flex-flow：row wrap
flex-direction ：决定主轴的方向（默认从main start ->main end（左到右）
默认值：row （默认从左到右）
row-reverse(反向，从右到左)
cloumn（列，变成从上向下）
cloumn-reverse（从下到上）
flex-wrap ：默认情况下，所有flex items 都会在同一行显示，放不下就会对items进行收缩
默认值：nowrap（不换行）
wrap （换行）
wrap-reverse（在交叉轴上进行反转------不常用）
justify-content ：决定了flex-items的对齐方式（默认左对齐）
默认值：flex-start（与main start对齐） flex-end（与main end对齐）center（居中对齐）
space-between（左侧右侧分别与main start 和main end 对齐，中间的均等分剩余空间）
space-evenly （自适应均等分所有空间距离）
space-around （左右item两侧距离边框的距离是中间items之间距离的2分之1）
align-items ：决定了flex items 在交叉轴（cross axis）上的对齐方式
默认值：normal（普通），当不设置item高度时，默认将长度拉伸到flex container（底部）
flex-start ：在交叉轴中的 start 对齐（默认的是左上角）
flex-end ：在交叉轴中的 end 对齐 （默认的是左下角）
center ：在交叉轴的中心点对齐
baseline ： 在基线上对齐 （与第一行文本基线对齐）
align-content ：决定了多行flex items 在交叉轴上的对齐方式 与 justify-content类似
默认值：stretch 拉伸（没有高度时进行拉伸）
flex-start（与cross start对齐） flex-end（与cross end对齐）center（居中对齐）
space-between（左侧右侧分别与cross start 和cross end 对齐，中间的均等分剩余空间）
space-evenly （自适应均等分所有空间距离）
space-around （左右item两侧距离边框的距离是中间items之间距离的2分之1）
应用于flex items 中的属性：
order ：决定了flex items 的排布顺序 用的比较少
默认值：0
可以设置任意的整数（正整数、负整数、0），值越小越排在前面
align-self ：可以通过 align-self 覆盖flex container 设置的 align-items
默认值：auto（遵从flex container 的 align-items设置）
stretch、flex-start、flex-end、center、baseline。效果跟align-items 一致
flex-grow ：进行拉伸（成长）
默认值：0 可以设置任意非负数字（正小数，正整数）
总值大于1的情况下按照比例进行拉伸，分完所有空间
总值小于1的情况下，按比例乘于剩余宽度，分不完所有空间
flex-shrink ：进行收缩（收缩） 当没有使用flex-wrap时，按比例进行收缩
默认值：1 （当flex items 在 main axis（主轴）方向上超过了flex container的size ， flex-shrink才会生效）
当总值大于1，按照比例进行收缩（在flex container 容器内部进行收缩）
当总值小于1，会收缩，但是会超出flex container容器
flex-basis ：用来设置flex items 在main axis（主轴）方向上的base size
默认值：auto、具体宽度数值（100px）
可以修改items的宽度大小，优先级更高，会覆盖之前设置的宽度
优先级（从上到下最高->最低）：max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size
flex ： 是其他属性的缩写（flex-grow || flex-shrink || flex-basis）
可以指定1个、2个或者3个值
单值语法 ：值必须为以下其中之一：
1. 一个无单位数（<number>）：它会当作<flex-grow>的值
2. 一个有效的宽度（width）：它会被当作<flex-basis>的值
3. 关键字 none ，auto 或者 initial
双值语法 ：第一个值必须是无单位数，并且它会被当作<flex-grow>的值
第二个值必须是以下之一：
1. 一个无单位数：它会被当作<flex-shrink>的值
2. 一个有效的宽度值：它会被当作<flex-basis>的值
三值语法 ：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值
第二个值必须为一个无单位数，并且它会被当作<flex-shrink>的值
第三个值必须为一个有效的宽度值，并且它会被当作<flex-basis>的值
