老赵

Appearance

flex-wrap ​

默认情况下，项目都排在主轴线上，使用 flex-wrap 可实现项目的换行。

css
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap ​

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

image-20240506160044078

wrap ​

项目主轴总尺寸超出容器时换行，第一行在上方

image-20240506160315723

wrap-reverse ​

也是换行 但是第一行在下方

image-20240506160340683

flex-flow ​

flex-direction 和 flex-wrap 的简写形式

css
.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

默认值为 row nowrap