flex常用属性及作用效果

Flex 常用属性及作用效果如下：

1. `display: flex;`
- 作用：将容器设置为 Flex 布局。
- 效果：容器内的子元素可以使用 Flex 布局相关的属性。

2. `flex-direction: row|row-reverse|column|column-reverse;`
- 作用：确定主轴的方向。
- 效果：决定子元素在容器内的排列方向。

3. `flex-wrap: nowrap|wrap|wrap-reverse;`
- 作用：确定子元素是否换行。
- 效果：决定子元素是否在一行显示，或者多行显示。

4. `justify-content: flex-start|flex-end|center|space-between|space-around;`
- 作用：确定子元素在主轴上的对齐方式。
- 效果：决定子元素在主轴上的排列方式，例如靠左、居中、靠右等。

5. `align-items: flex-start|flex-end|center|baseline|stretch;`
- 作用：确定子元素在交叉轴上的对齐方式。
- 效果：决定子元素在交叉轴上的排列方式，例如靠上、居中、靠下等。

6. `align-content: flex-start|flex-end|center|space-between|space-around|stretch;`
- 作用：确定多行子元素在交叉轴上的对齐方式。
- 效果：当子元素换行时，决定多行子元素在交叉轴上的排列方式。

7. `flex-grow: <number>;`
- 作用：确定子元素的放大比例。
- 效果：决定子元素在有剩余空间时的放大比例。

8. `flex-shrink: <number>;`
- 作用：确定子元素的缩小比例。
- 效果：决定子元素在空间不足时的缩小比例。

9. `flex-basis: <length>|auto;`
- 作用：确定子元素的基准大小。
- 效果：决定子元素在没有放大或缩小时的初始大小。

10. `flex: none|auto|<flex-grow> <flex-shrink> <flex-basis>;`
- 作用：综合设置子元素的放大比例、缩小比例和基准大小。
- 效果：可以一次性设置子元素的 flex-grow、flex-shrink 和 flex-basis 属性。

这些是 Flex 布局中常用的属性及其作用效果。注意，以上属性需要应用在容器元素上，以影响容器内的子元素布局。