flex布局收缩代码

Flex布局是一种用于页面布局的CSS3模块，它提供了一种灵活的方式来排列和对齐元素。在Flex布局中，可以使用一些属性来实现元素的收缩效果。

以下是一些常用的Flex布局收缩代码：

1. flex-grow属性：控制元素在主轴上的扩展比例，默认值为0，表示不扩展。可以设置为一个正整数，表示扩展的比例。例如，设置flex-grow: 1;表示元素将会按照剩余空间的比例进行扩展。

2. flex-shrink属性：控制元素在主轴上的收缩比例，默认值为1，表示可以收缩。可以设置为一个正整数，表示收缩的比例。例如，设置flex-shrink: 0;表示元素不会收缩。

3. flex-basis属性：定义了元素在主轴上的初始大小，默认值为auto。可以设置为一个长度值或百分比。例如，设置flex-basis: 200px;表示元素的初始大小为200像素。

4. flex属性：是flex-grow、flex-shrink和flex-basis属性的简写形式。例如，设置flex: 1 0 200px;表示元素的扩展比例为1，收缩比例为0，初始大小为200像素。

5. align-self属性：用于单个元素，覆盖父容器的align-items属性。可以设置为auto、flex-start、flex-end、center、baseline或stretch。例如，设置align-self: flex-end;表示元素在交叉轴上对齐到父容器的底部。