CSS - flex-flow 屬性

CSS flex-flow 是一個簡寫屬性，用於定義 flex-direction 和 flex-wrap 屬性的值，這兩個屬性分別用於在一個語句中確定彈性容器的方向及其內容的換行行為。元素必須是靈活的，以便該屬性顯示其效果。

語法

flex-flow: flex-direction flex-wrap | initial | inherit;

屬性值

值	描述
flex-direction	它指定彈性專案的排列方向。可能的值為：row、row-reverse、column、column-reverse、initial 和 inherit。預設值為 row。
flex-wrap	它指定彈性專案是否應該換行。可能的值為：nowrap、wrap、wrap-reverse、initial 和 inherit。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承該屬性。

CSS Flex Flow 屬性示例

以下示例說明了使用不同值的 flex-flow 屬性。

使用 Row 方向的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它接受一個或兩個值。在以下示例中，使用了兩個值 flex-direction: row 和 flex-wrap: nowrap, wrap 和 wrap-reverse。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: row nowrap;
         width: 400px;
      }

      .container2 {
         display: flex;
         flex-flow: row wrap;
         width: 300px;
      }

      .container3 {
         display: flex;
         flex-flow: row wrap-reverse;
         width: 300px;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow Property
   </h2>
   <p>
      <strong>
         Flex Flow: row nowrap
      </strong> 
      -Items are arranged in a row and do not wrap, causing 
      horizontal overflow if the items exceed the container's
      width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row wrap
      </strong> 
      - Items are arranged in a row and wrap onto
      the next line if there isn't enough space 
      in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row wrap-reverse
      </strong> 
      - Items are arranged in a row and wrap onto the next
      line in reverse order if there isn't enough space in
      the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>

</body>

</html>

使用 Row Reverse 方向的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它接受一個或兩個值。在以下示例中，使用了兩個值 flex-direction: row-reverse 和 flex-wrap: nowrap, wrap 和 wrap-reverse。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;

      }

      .container1 {
         display: flex;
         flex-flow: row-reverse nowrap;
         width: 400px;
         margin-left: auto;
      }

      .container2 {
         display: flex;
         flex-flow: row-reverse wrap;
         width: 300px;

      }

      .container3 {
         display: flex;
         flex-flow: row-reverse wrap-reverse;
         width: 300px;

      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row-reverse nowrap
      </strong> 
      - Items are arranged in a row in reverse order and
      do not wrap, causing horizontal overflow if the 
      items exceed the container's width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse wrap
      </strong> 
      - Items are arranged in a row in reverse order
      and wrap onto the next line if there isn't 
      enough space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse wrap-reverse
      </strong> 
      - Items are arranged in a row in reverse order
      and wrap onto the next line in reverse order
      if there isn't enough space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>

</body>

</html>

使用 Column 方向的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它接受一個或兩個值。在以下示例中，使用了兩個值 flex-direction: column 和 flex-wrap: nowrap, wrap 和 wrap-reverse。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 300px;
         height: 400px;
         overflow: auto;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: column wrap;
      }

      .container3 {
         display: flex;
         flex-flow: column wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: column nowrap
      </strong> 
      - Items are arranged in a vertical column and do
      not wrap. Vertical scrolling will occur if the 
      items exceed the container's height.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column wrap
      </strong> 
      - Items are arranged in a vertical column and
      wrap onto the next line when there isn't enough
      space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column wrap-reverse
      </strong> 
      - Items are arranged in a vertical column and wrap
      onto the next line in reverse order when there
      isn't enough space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>

</body>

</html>

使用 Column Reverse 方向的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它接受一個或兩個值。在以下示例中，使用了兩個值 flex-direction: column-reverse 和 flex-wrap: nowrap, wrap 和 wrap-reverse。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 300px;
         height: 400px;
         overflow: auto;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column-reverse nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: column-reverse wrap;
      }

      .container3 {
         display: flex;
         flex-flow: column-reverse wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS Flex Flow Property with column-reverse
   </h2>
   <p>
      <strong>
         Flex Flow: column-reverse nowrap
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and do not wrap. Vertical scrolling will occur
      if the items exceed the container's height.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column-reverse wrap
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and wrap onto the next column when there isn't
      enough vertical space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column-reverse wrap-reverse
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and wrap onto the next column in reverse order
      when there isn't enough vertical space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
</body>

</html>

僅使用 Flex Direction 值的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它最多接受兩個值。如果只給出一個值，則另一個值將是該屬性的預設值。在以下示例中，使用了單個值 flex-direction: row 和 flex-direction: row-reverse，flex-wrap 在這兩種情況下都採用預設值“nowrap”。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #000;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: row;
      }

      .container2 {
         margin-left: auto;
         display: flex;
         flex-flow: row-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row (nowrap)
      </strong> 
      - Items are arranged in a horizontal row from left
      to right and do not wrap. Horizontal scrolling will
      occur if the items exceed the container's width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse (nowrap)
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap. Horizontal
      scrolling will occur if the items exceed the 
      container's width.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

僅使用 Flex Direction 值的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它最多接受兩個值。如果只給出一個值，則另一個值將是該屬性的預設值。在以下示例中，使用了單個值 flex-direction: column 和 flex-direction: column-reverse，flex-wrap 在這兩種情況下都採用預設值“nowrap”。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column;
      }

      .container2 {
         display: flex;
         flex-flow: column-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row (nowrap)
      </strong> 
      - Items are arranged in a vertical column from
      top to bottom and do not wrap.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse (nowrap)
      </strong> 
      - Items are arranged in a vertical column in reverse
      order from bottom to top and do not wrap. 
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

僅使用 Flex Wrap 值的 Flex Flow 屬性

要在一個語句中設定元素的方向和換行，我們使用 flex-flow 屬性。它最多接受兩個值。如果只給出一個值，則另一個值將是該屬性的預設值。在以下示例中，使用了單個值 flex-wrap: nowrap、flex-wrap: wrap 和 flex-wrap: wrap-reverse，flex-direction 在所有情況下都採用預設值“row”。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         border: 2px solid #000;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: wrap;
      }

      .container3 {
         display: flex;
         flex-flow: wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: nowrap
      </strong> 
      - Items are arranged in a horizontal row from left
      to right and do not wrap.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: wrap
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: wrap-reverse
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
flex-flow	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

列印頁面