CSS 参考手册 目录

CSS flex-wrap 属性

flex-wrap 属性定义了 flex 容器中的 flex 元素是如何排列的。

  • nowrap:默认值,所有元素都在一行上排列,可能导致溢出容器。
  • wrap:元素在多行上排列。
  • wrap-reverse:元素在多行上排列,但是反向排列。

语法

---------- ------ - ---- - -------------

示例

---------- -
  -------- -----
  ---------- -----
-

----- -
  ----- - - ------
-

在上面的示例中,.container 是一个 flex 容器,设置了 flex-wrap: wrap,这样 flex 元素会在多行上排列。.item 是 flex 元素,设置了 flex: 1 0 200px,表示元素可以伸缩,初始大小为 200px,但不缩小。

注意事项

  • 使用 flex-wrap 可以控制 flex 元素在容器中的排列方式,避免溢出或排列不美观的情况。
  • 结合其他 flex 属性一起使用,可以更灵活地布局页面。

上一篇:CSS 属性 flex-shrink
下一篇:CSS 属性 float