CSS flex-flow 属性

2025年3月26日 | 阅读 4 分钟

此 CSS 属性是 flex-direction 和 flex-wrap 属性的简写。它仅对 flex-items 生效，如果容器的项不是 flex-item，则 flex-flow 属性将不会影响相应的项。

语法

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

此 CSS 属性的可能值如下表所示：

值	描述
flex-direction	flex-direction 属性用于设置 flex 容器内弹性项的方向。其默认值为 row（从左到右，从上到下）。此属性的可能值为 row, row-reverse, column 和 column-reverse。
flex-wrap	flex-wrap 属性指定了在空间不足以容纳所有 flex-items 在一行时，flex-items 是否应该换行。其默认值为 nowrap。此属性的可能值为 nowrap, wrap 和 wrap-reverse。
initial	它将属性设置为其默认值。
inherit	它从其父元素继承属性。

示例

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

在第一个容器中，我们对 flex-items 应用了 flex-flow: row nowrap;；在第二个容器中，我们对 flex-items 应用了 flex-flow: row-reverse nowrap;；在第三个容器中，我们对 flex-items 应用了 flex-flow: column nowrap;；在第四个容器中，我们对 flex-items 应用了 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>

输出

示例

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

在第一个容器中，我们对 flex-items 应用了 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>

输出

示例

这里我们使用了 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 属性

语法

示例

示例

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS flex-flow 属性

语法

示例

示例

示例

相关帖子

CSS FlexBox

CSS units

CSS Tooltips

CSS @Media Query

CSS Gradient

CSS Loader

CSS translate

CSS z-index

CSS radial-gradient

flex-basis property

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器