CSS flex-flow

此CSS属性是
flex-direction 和
flex-wrap 属性的简写。它仅适用于flex-item，因此，如果容器的项目不是flex-item，则
flex-flow 属性将不会影响相应的项目。

语法

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

flex-flow属性的默认值为
row nowrap ，它是
flex-direction 的默认值（即
row ）和
flex-wrap （即
nowrap ）属性。

此CSS属性的列表如下：

值	说明
flex-direction	flex-direction属性用于设置flex容器内的柔性项目的方向。其默认值为行（从左到右，从上到下）。此属性的可能值为row, row-reverse, column和column-reverse。
flex-wrap	flex-wrap属性指定在一条伸缩线上没有足够的空间容纳伸缩项目时，是否应该伸缩项目。其默认值为 nowrap 。此属性的可能值为 nowrap, wrap和 wrap-reverse 。
initial	它将属性设置为其默认值。
inherit	它从其父元素继承属性。

示例

在这里，我们使用
flex-wrap 属性的
wrap 值，
flex-direction属性的可能值为
row, row-reverse, column和
column-reverse。

在第一个容器中，将
flex-flow: row nowrap; 应用于flex-items，在第二个容器中，我们将
flex-flow: row-reverse nowrap; 应用于flex-items，在第三个容器中，将
flex-flow: column nowrap;应用于flex-item，在第四容器中，我们应用
flex-flow: column-reverse nowrap; 到项目。

 <!DOCTYPE html>
 <html>
 <head>
 <title>flex-flow property</title>
 <style>
 .mainrow{
 width: 400px;
 height: 50px;
 border: 5px solid red;
 }
 .maincol{
 width: 100px;
 height: 200px;
 border: 5px solid red;
 }
 #row {
 flex-flow: row nowrap;
 }
 #rowrev {
 flex-flow: row-reverse nowrap;
 }
 #col {
 flex-flow: column nowrap;
 }
 #colrev {
 flex-flow: column-reverse nowrap;
 }
 div {
 width: 100px;
 height: 50px;
 display: flex;
 font-size: 20px;
 }
 </style>
 </head>
 <body>
 <center>
 <h2> flex-flow: row nowrap;</h2>
 <div id= "row" class = "mainrow">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: row-reverse nowrap;</h2>
 <div id= "rowrev" class = "mainrow" >
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column nowrap;</h2>
 <div id="col" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column-reverse nowrap;</h2>
 <div id="colrev" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 </center>
 </body>
 </html>

输出

CSS flex-flow_https://bianchenghao6.com_【CSS 教程】_第1张

示例

与上面的示例类似，在这里我们使用
flex-wrap 属性的
wrap 值和所有
flex-direction属性的可能值为
row, row-reverse, column和
column-reverse。

在第一个容器中，将
flex-flow: row wrap; 应用于flex-items，在第二个容器中，我们将
flex-flow: row-reverse wrap; >到flex-items，在第三个容器中，将
flex-flow: column wrap; 应用于flex-items，在第四个容器中，我们应用
flex-flow: column-reverse wrap; 到项目。

 <!DOCTYPE html>
 <html>
 <head>
 <title>flex-flow property</title>
 <style>
 .mainrow{
 width: 200px;
 height: 100px;
 border: 5px solid red;
 }
 .maincol{
 width: 200px;
 height: 150px;
 text-align: left;
 border: 5px solid red;
 }
 #row {
 flex-flow: row wrap;
 }
 #rowrev {
 flex-flow: row-reverse wrap;
 }
 #col {
 flex-flow: column wrap;
 }
 #colrev {
 flex-flow: column-reverse wrap;
 }
 div {
 width: 100px;
 height: 50px;
 display: flex;
 font-size: 20px;
 font-weight: bold;
 }
 </style>
 </head>
 <body>
 <center>
 <h2> flex-flow: row wrap;</h2>
 <div id= "row" class = "mainrow">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: row-reverse wrap;</h2>
 <div id= "rowrev" class = "mainrow" >
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column wrap;</h2>
 <div id="col" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column-reverse wrap;</h2>
 <div id="colrev" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 </center>
 </body>
 </html>

输出

CSS flex-flow_https://bianchenghao6.com_【CSS 教程】_第2张

示例

在这里，我们使用
flex-wrap 属性的
wrap-reverse 值和所有可能的
flex-direction属性，它们是
row, row-reverse, column和
column-reverse。

 <!DOCTYPE html>
 <html>
 <head>
 <title>flex-flow property</title>
 <style>
 .mainrow{
 width: 200px;
 height: 100px;
 border: 5px solid red;
 }
 .maincol{
 width: 200px;
 height: 150px;
 text-align: left;
 border: 5px solid red;
 }
 #row {
 flex-flow: row wrap-reverse;
 }
 #rowrev {
 flex-flow: row-reverse wrap-reverse;
 }
 #col {
 flex-flow: column wrap-reverse;
 }
 #colrev {
 flex-flow: column-reverse wrap-reverse;
 }
 div {
 width: 100px;
 height: 50px;
 display: flex;
 font-size: 20px;
 font-weight: bold;
 }
 </style>
 </head>
 <body>
 <center>
 <h2> flex-flow: row wrap-reverse;</h2>
 <div id= "row" class = "mainrow">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: row-reverse wrap-reverse;</h2>
 <div id= "rowrev" class = "mainrow" >
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column wrap-reverse;</h2>
 <div id="col" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 <h2> flex-flow: column-reverse wrap-reverse;</h2>
 <div id="colrev" class = "maincol">
 <div style="background-color: lightblue;"> 1 </div>
 <div style="background-color: pink;"> 2 </div>
 <div style="background-color: lightgreen"> 3 </div>
 <div style="background-color: yellow;"> 4 </div>
 </div>
 </center>
 </body>
 </html>

输出

CSS flex-flow_https://bianchenghao6.com_【CSS 教程】_第3张

CSS 2D转换

CSS flex-shrink