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

列印頁面