CSS flex-flow 属性-之路教程

语法

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

当我们设置 flex-flow: row wrap 时，意味着第一个值定义了 flex-direction，第二个值定义了 flex-wrap 属性。

-webkit-flex-flow: row wrap;
flex-flow: row wrap;

下面的代码与上面的代码相同。

-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

具有“row”和“wrap”值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

具有“wrap-reverse”和“column”值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        color: #ffffff;
        text-align: right;
        display: flex;
        -webkit-flex-flow: column wrap-reverse;
        flex-flow: column wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

具有 "row" 和 "nowrap" 值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

结果

具有“row-reverse”和“nowrap”值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

具有“column”和“nowrap”值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        color: #ffffff;
        text-align: right;
        display: flex;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

具有“column-reverse”和“nowrap”值的 flex-flow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        color: #ffffff;
        text-align: right;
        display: flex;
        -webkit-flex-flow: column-reverse nowrap;
        flex-flow: column-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

CSS flex-flow 属性

flex-flow 属性被认为是 flex-wrap 和 flex-direction 属性的简写属性。

此属性是 CSS3 属性之一。

它是灵活框布局模块的一部分。

如果没有弹性项目（item）（item），则 flex-flow 属性不会有任何影响。

flex-flow 属性与 -Webkitextension 一起用于此类浏览器，例如 Safari、Google Chrome 和 Opera。

初始值	row nowrap.
应用于	柔性容器
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.style.flexflow =“column nowrap”;

CSS flex-flow 属性值说明

值	描述
flex-direction	定义灵活的项目（item）（item）方向。可能的值为：row row-reverse column column-reverse initial inherit
flex-wrap	定义灵活项目（item）（item）是否应包装。可能的值为：nowrap wrap wrap-reverse initial inherit
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:30 来源：oir作者：oir

←CSS flex-direction 属性

CSS flex-grow 属性→

语法