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

打印页面