flex布局--学习笔记(2021-10记)

flex布局

---

相关语法内容：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
学习视频：https://www.bilibili.com/video/BV1E7411774G

1.浏览器兼容表

查询网址：
https://caniuse.com/?search=flex

2.flex和inline-flex

3.flex布局模型

①在flex布局里x轴和y轴分别叫主轴和交叉轴；
②主轴和交叉轴有其开始和结束点（当成线段理解）；
③主轴和交叉轴有其大小（长度）。

4.flex的相关属性

一定要注意区分设置在两者之间的属性，设置错地方是不生效的。

【注意：】

①关于flex-direction，在改变主轴的方向后，交叉轴肯定是依然垂直的，自己的理解是当主轴是左右方向时，交叉轴是向下；当主轴是上下方向时，交叉轴是向右。

②关于justify-content，在阮一峰的博客里使用space-around进行等间隔划分，视频补充了一个space-evenly，两者有一定的区别。

区别： https://blog.csdn.net/zjy660358/article/details/113935300?utm_source=app&app_version=4.16.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

③align-content也有space-evenly，在视频里有补充。

④flex-grow的使用，注意所有flex-item的flex-frow和小于1和大于1的情况，等于1 时是等分剩余空间（size是xxxpx）；默认值为0。

⑤flex-shrink的使用，注意默认值是1，收缩总和不超过1的情况很少用，因为那样会收缩不完全；同时注意flex收缩后的最终size不能小于min-width（最小宽）或min-height（最小高）。

⑥（了解）flex-basis

⑦ flex