常用的flex布局css样式

常用的flex布局CSS样式有以下几种：

1. 父容器属性：
- `display: flex;`：将父容器设置为flex布局。
- `flex-direction: row/column;`：设置主轴方向，row为水平方向，column为垂直方向。
- `justify-content: flex-start/center/flex-end/space-between/space-around;`：设置主轴上的对齐方式，分别为靠左、居中、靠右、两端对齐、每个元素周围均匀分布。
- `align-items: flex-start/center/flex-end/stretch/baseline;`：设置交叉轴上的对齐方式，分别为顶部对齐、居中、底部对齐、拉伸以填充容器、基线对齐。
- `flex-wrap: nowrap/wrap/wrap-reverse;`：设置元素换行方式，nowrap为不换行，wrap为换行，wrap-reverse为反向换行。

2. 子容器属性：
- `flex-grow: 0/1;`：设置子元素的放大比例，默认为0，即不放大；设置为1时，将按比例放大剩余空间。
- `flex-shrink: 0/1;`：设置子元素的缩小比例，默认为1，即按比例缩小；设置为0时，不缩小。
- `flex-basis: auto/width;`：设置子元素在主轴上的初始大小，auto表示根据内容自动分配大小，width表示固定宽度。
- `align-self: auto/flex-start/center/flex-end/stretch/baseline;`：设置子元素的交叉轴对齐方式，具体取值与align-items相同。

这些是flex布局中比较常用的CSS样式，可以根据实际需求进行组合和调整。