CSS教程
CSS进阶

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, columncolumn-reverse
flex-wrap flex-wrap属性指定在一条伸缩线上没有足够的空间容纳伸缩项目时,是否应该伸缩项目。其默认值为 nowrap 。此属性的可能值为 nowrap, wrap wrap-reverse
initial 它将属性设置为其默认值。
inherit 它从其父元素继承属性。

示例

在这里,我们使用 flex-wrap 属性的 wrap 值, flex-direction属性的可能值为 row, row-reverse, columncolumn-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属性

示例

与上面的示例类似,在这里我们使用 flex-wrap 属性的 wrap 值和所有 flex-direction属性的可能值为 row, row-reverse, columncolumn-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属性

示例

在这里,我们使用 flex-wrap 属性的 wrap-reverse 值和所有可能的 flex-direction属性,它们是 row, row-reverse, columncolumn-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属性
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4