【学习打卡】第一天 前端工程师2022版Flex弹性布局

课程名称： 前端工程师2022版

课程章节：Flex弹性布局

主讲老师：Alex

课程内容：

今天学习的内容包括：

flex项目的属性：

1、order ：

定义了项目的排列顺序，数值越小，排列越靠前，默认为0

2、flex-grow：

定义了项目在主轴方向上放大比例。瓜分剩余空间。默认为 0，即如果存在剩余空间，该项目也不放大。

取值; /* default 0 */

3、flex-shrink：

定义项目在主轴上缩小比例。默认为1，如果空间不足，该项目将缩小，取值; /* default 1 */

4、flex-basis：

定义了在分配多余空间之前，Flex 项目占据的主轴大小（main size）。

浏览器根据这个属性，计算主轴是否有多余空间；

它的默认值为 auto，即项目的本来大小  取值; | auto; /* default auto */

5、flex：

是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto     

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)*

6、align-self：

允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性     

align-self: auto（默认值） | flex-start | flex-end | center | stretch | baseline;

课程收获：

Flex布局可以解决浮动问题，方便编程

在写练习时，发现很多属性还是用的不熟练，需要多多练习。

注意：

space-between:每两个项目中间间距相等，这个属性可以用在项目两边排

今天学习课程共用了50分钟，

希望能够坚持下去。