flex布局笔记
一、简介：
flex布局又叫弹性布局，只要将最外层的块级元素display设置为flex，就创建了flex布局。可以把他看成一个盒子，盒子里面有很多子项。设置了flex布局的最外层元素被称为flex container，作为容器存在，里面的子项被称为flex items。container和item分别有不同的属性可以设置。
几个基础概念：
（图片来自网络）
- 主轴：main axis（从main-start到main-end）子元素默认排布
- 交叉轴：cross axis(从cross-start到cross-end)
- main size：单个项目占据主轴长度大小
- cross size：子元素在交叉轴方向上代销
二、container的属性
2.1 flex-direction：绝对主轴方向，控制子项的整体布局方向
- row：主轴从左到右
- row-reverse：主轴从右到左
- column：主轴从上到下
- column-reverse：主轴从下到上
2.2 justify-content：主轴的对齐方式，控制子项的对齐方式
- flex-start:与main start对齐(默认值)
- flex-end：与main end对齐
- center：居中对齐
- space-between：item之间距离相等，main start 和main end 两端对齐(两端靠边)
- space-evenly：item之间和两端距离相等
- space-around：item之间距离相等，main start 和main end之间的距离是 items之间距离的一半。
2.3 align-items：item在cross axis上的对齐方式
- normal：与stretch一致，item在cross axis方向的size为auto时，会自动拉伸至填充container(意思就是item没有设置高度，会自动填充至container高度)
- flex-start:与cross start对齐(顶部对齐)
- flex-end：与cross end对齐(底部对齐)
- center：居中对齐
- baseline：与基准线对齐
2.4 flex-wrap:控制子项整体单行显示还是换行显示
- nowarp：默认nowarp，一行放不下时会压缩。
- warp：宽度不足换行显示
- wrap-reverse：宽度不足换行显示，但是从下往上开始
2.5 align-content：align-content可以看成和justify-content是相似且对立的属性，justify-content指明水平方向flex子项的对齐和分布方式，而align-content则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行，则align-content属性是没有任何效果的。
- stretch：默认值，与align-items的stretch类似
- flex-start：与cross start 对齐，顶部堆砌
- flex-end：与cross end 对齐
- center：居中对齐
- space-between：顶底两端对齐，items之间距离相等
- space-around：顶底两端是items距离之间的一半，items之间的距离相等
- space-evenly：全部等距。
三、flex-items属性
3.1 order：
可以设置任意整数,值越小越排在前面，默认值是0
3.2 align-self:
可以覆盖flex container设置的align-items。参数与align-items一致
3.3 flex-grow：
决定flex items 如何扩展。当flex container 在main axis还有剩余size时，可用。可以设置任意非负数字，默认为0。
- 所有flex-grow总和超过1，每个item扩展的size为
剩余size*flex-grow/sum - 所有flex-grow总和不超过1，每个item扩展的size为 `剩余size*flex-grow
注：flex items扩展后端饿size不能超过width\height
3.4 flex-shrinnk：
不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。如果设置为0，则表示不收缩，保持原始的fit-content宽度。
- 如果只有一个flex子项设置了flex-shrink：
flex-shrink值小于1，则收缩的尺寸不完全，会有一部分内容溢出flex容器。
flex-shrink值大于等于1，则收缩完全，正好填满flex容器。
- 如果多个flex子项设置了flex-shrink：
flex-shrink值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。
flex-shrink值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和flex-shrink值的比例一样。
3.5 flex-basis：
用来设置item的宽度。
决定items宽度的优先级(从高到低)：
max-width\min-width > flex-basis > width >内容的size
参考：https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/
