flex-grow
flex-grow会让元素在父容器里面按照比例分配
flex-shrink
flex-shrink 是一个CSS属性，用于控制flex容器中的项目在容器宽度不够时如何收缩。默认情况下，所有项目都会平均收缩，但是您可以使用 flex-shrink 属性来更改项目的收缩比例。值越大的项目将收缩得更多，而值为0的项目则不会收缩。
意思就是当容器里的元素总长度超过这个容器的时候，使用flex-shrink按照什么比例去进行收缩。
当弹性容器的总宽度或高度不足以容纳所有flex项目时，浏览器需要缩小其中的一些项目以适应容器大小。这时，flex-shrink 属性就起作用了。flex-shrink 属性的值是一个非负数，默认值为1，它表示项目缩小的比例。
外部容器是1000 内部三个盒子是 500 500 400在这种情况下，假设外部容器的宽度为1000px，其中有三个flex项目，它们的宽度分别为500px、500px和400px，flex-shrink 值分别为1、2和3：
计算所有项目的 flex-shrink 值之和：1 + 2 + 3 = 6
计算每个项目的收缩比例：1/6、2/6 和 3/6
计算每个项目的实际收缩量：可用空间总量 (1000px - 每个项目的初始宽度) * 收缩比例
因此，第一个项目的实际收缩量为 (1000 - 500) 1/6 = 83.33px，第二个项目的实际收缩量为 (1000 - 500) 2/6 = 166.67px，第三个项目的实际收缩量为 (1000 - 400) * 3/6 = 300px。这些实际收缩量将被减去每个项目的初始宽度来得到它们的最终宽度。
请注意，这个计算方法假设所有项目都有相同的 flex-basis 值，即它们在未收缩时的初始宽度相同。如果项目的 flex-basis 值不同，那么它们的初始宽度也会不同，需要根据实际情况进行计算。
flex-basis
用来控制flex中元素的初始宽度的。
flex-basis 的值可以是一个长度单位（如像素、百分比等），也可以是 auto 关键字。如果将 flex-basis 设置为 auto，则项目的初始宽度或高度将基于项目的内容大小或者默认值来计算
width与flex-basis的区别
width 和 flex-basis 都可以用来设置元素的宽度，但它们在实现布局时有一些不同之处。两个一起用的时候flex-basis会覆盖width，而且你要知道的是flex-basis不一定是宽度，原文说的是在flex中设置主轴的尺寸，你要是将主轴设置为column那么flex-basis是不是看起来就会变成高度了。
width 属性用于设置元素的固定宽度，它通常是一个具体的数值或者一个百分比。在使用 width 属性时，元素的宽度是固定的，无论元素的内容是多少，它都不会自动调整其宽度。
相比之下，flex-basis 属性用于设置flex项目在未进行任何伸缩时的初始宽度或高度。它可以是一个具体的数值、一个百分比或者 auto 关键字。在使用 flex-basis 属性时，元素的初始宽度或高度基于项目的内容大小或者默认值来计算。当flex项目进行伸缩时，flex-basis 属性的值可以被 flex-grow 和 flex-shrink 属性所改变，从而使元素的宽度或高度相应地进行调整。
因此，width 属性适用于需要固定宽度的元素，而 flex-basis 属性适用于使用flex布局的元素，它可以根据元素的内容大小进行自适应调整。
flex
flex 是CSS中用于设置弹性盒子布局的属性，它是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写。
具体讲解flex1：
flex: 1 等价于 flex: 1 1 0%，其中：
flex-grow 属性的值为 1，表示项目的增长比例为 1，即在弹性容器内的多余空间中，该项目将获得与其他具有相同 flex-grow 值的项目相等的额外空间。
flex-shrink 属性的值为 1，表示项目的缩小比例为 1，即在弹性容器内的空间不足时，该项目将与其他具有相同 flex-shrink 值的项目相等地缩小。
flex-basis 属性的值为 0%，表示项目的基础尺寸为 0%，即在弹性容器内的空间不足时，该项目可以缩小到 0% 的基础尺寸。
align-self
align-self 是CSS中用于设置单个flex项目在交叉轴上的对齐方式的属性，它可以覆盖其父级弹性容器的 align-items 属性。用于在弹性容器中，对单个项目进行对齐方式的调整。
align-self 属性的可选值包括：
- auto：默认值，表示继承父容器的 align-items 属性。
- flex-start：在交叉轴的起始位置对齐。
- flex-end：在交叉轴的结束位置对齐
- center：在交叉轴的中间位置对齐。
- baseline：在基线对齐。
- stretch：在交叉轴上拉伸填充整个父容器。
其他：与align-items的区别:align-item是在父容器用的给下面的元素都进行交叉轴的对齐方式进行更改而align-self是用在当前元素单独对交叉轴进行更改。
align-self可以覆盖父容器的 align-items 属性。因此，align-self 用于调整单个项目的对齐方式，而 align-items 用于调整所有项目的对齐方式。
