CSS Flexbox flex-flow - 易学教程，面试笔记经验！

CSS 属性

CSS flex-flow 是一个简写属性，它确定 Flex 容器的方向及其内容的换行行为。

此属性使 Flex 项目在水平行中换行时能够换行到多行。超过容器的宽度。

flex-flow 属性是以下 CSS 属性的简写:

属性值

row: Flex 项目显示在水平方向从左到右。
row-reverse: Flex 项目以水平方向显示，但从右到左以相反的顺序显示。
column: Flex 项目从上到下以垂直方向显示。
column-reverse: Flex 项目以垂直方向显示但从下到上的顺序相反。
nowrap: Flex 项目不应换行或插入下一行。
wrap: Flex 项目应换行到下一行。
wrap-reverse: Flex 项目应以相反的顺序换行到下一行。

适用范围

Flex 容器。

语法

<flex-direction>

flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

<flex- wrap>

flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

<flex-direction> 和 <flex-wrap>

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

CSS flex-flow: row

以下示例演示了 flex-flow: row 属性的使用。 Flex 项目以水平方向显示 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>
</html>

CSS flex-flow: row-reverse

以下示例演示了 flex-flow: row 属性将 Flex 项目排列在一个水平方向从右到左 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>
</html>

CSS flex-flow: column

以下示例演示了 flex-flow:column 属性沿垂直方向排列 Flex 项目 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: column;
      background-color: green;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow: column-reverse

以下示例演示了 flex-flow:column 属性沿垂直方向排列 Flex 项目，但从底部以相反的顺序显示到顶部 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: column-reverse;
      background-color: green;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow: nowrap

以下示例演示了 flex-flow: nowrap 属性可防止 Flex 项目换行到下一行 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: nowrap;
      background-color: green;  
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>当您调整浏览器窗口的大小时，弹性项目将显示在单行中而不换行。</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow: wrap

以下示例演示了 flex-flow:wrap 属性的使用。这里，flex 项目换行到下一行 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: wrap;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>当您调整浏览器窗口大小时，弹性项目应该换行到下一行。</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-flow: wrapp-reverse

以下示例演示了 flex-flow:wrap-reverse 属性的使用。这里弹性项目以相反的顺序换行到下一行 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: wrap-reverse;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>当您调整浏览器窗口的大小时，Flex 项目应以相反的顺序换行到下一行。</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-flow: row wrap

以下示例演示了 flex-flow: row wrap 属性排列弯曲一行中的项目并换行到下一行 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row wrap;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>当您调整浏览器窗口大小时，弹性项目应该换行到下一行。</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>