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
、自适应容器宽度、高度。