CSS - flex-wrap 属性

CSS flex-wrap 属性决定了弹性项目是否应该保持在一行中，或者根据容器中可用空间允许换行到多行。为了使该属性生效，元素必须是灵活的。

语法

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

属性值

值	描述
nowrap	指定元素将保持在同一行，不会换行。默认值。
wrap	根据弹性容器的可用空间，允许元素在需要时换行。
wrap-reverse	根据弹性容器的可用空间，允许元素在需要时反向换行。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS Flex Wrap 属性示例

以下示例解释了具有不同值的flex-wrap 属性。

不换行值的 Flex Wrap 属性

要使弹性项目保持在弹性容器的同一行中，我们使用nowrap 值。如果弹性项目超过容器的尺寸，它们将溢出。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: nowrap;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }
      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: no-wrap (flex items will remain
      in same line, will overflow if they exceed
      the dimensions of the container)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

换行值的 Flex Wrap 属性

要使弹性项目跨越多行，我们使用wrap 值。如果弹性项目开始超过容器的尺寸，它们将根据容器中可用空间移动到下一行。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: wrap;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }

      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: wrap (flex items move to multiple
      lines if they exceed container dimensions)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

反向换行值的 Flex Wrap 属性

要使弹性项目以反向方向跨越多行，我们使用wrap-reverse 值。如果弹性项目开始超过容器的尺寸，它们将根据容器中可用空间反向移动到下一行。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: wrap-reverse;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }

      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: wrap-reverse (flex items move to
      multiple lines in reverse direction if they
      exceed container dimensions)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
flex-wrap	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

打印页面