CSS 中的 flex-wrap 属性可以设置以下三个值:
nowrap:表示不换行;
wrap:表示按照主轴方向自动换行(如果一行内放不下所有的 Flex 项目,就会出现换行);
wrap-reverse:表示按照主轴方向自动换行,并且交叉轴起点和终点对调。
其中,nowrap 和 wrap-reverse 对应着 flex-direction 属性中的 row 和 row-reverse 值,而 wrap 可以同时适用于 row 和 column 方向。
需要注意的是,使用 flex-wrap 属性只有在容器的宽度或高度固定时才能发挥作用。此外,还可以借助 flex-basis 和 flex-grow 属性来控制 Flex 项目自适应容器宽度或高度,在应用 flex-wrap 属性时也需要留意这些相关属性的取值。
关键词高亮:flex-wrap、nowrap、wrap、wrap-reverse、flex-direction、row、row-reverse、column、flex-basis、flex-grow、自适应容器宽度、高度。