CSS flex-flow 是一个速记属性，用于确定 flex 容器的方向及其内容的包装行为。
此属性使 flex 项在超过容器的宽度时可以换行到水平行中的多行上。
flex-flow 属性是以下 CSS 属性的简写：
可能的值
- row − 弹性项目从左到右沿水平方向显示。
- row-reverse - 弹性项目以水平方向显示，但从右到左以相反的顺序显示。
- column − 弹性项目从上到下以垂直方向显示。
- column-reverse − 弹性项目以垂直方向显示，但从下到上以相反的顺序显示。
- 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 - 行值
以下示例演示了 flex-flow： row 属性的用法。弹性项目在水平方向上显示 -
<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 - 行反向值
以下示例演示了 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 - 列值
以下示例演示了 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 - 列反向值
以下示例演示了 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>As you resize the browser window the flex items are displayed in a single row without wrapping.</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 - 包装值
以下示例演示了 flex-flow： wrap 属性的用法。在这里，flex items 换行到下一行 -
<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>As you rsize the browser window the flex items should be wrap to the next line.</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 - 换行-反向值
以下示例演示了 flex-flow 的用法：wrap-reverse 属性。在这里，flex items 以相反的顺序换行到下一行 -
<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>As you rsize the browser window the flex items should be wrap to the next line in reverse order.</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 - 行换行值
以下示例演示了 flex-flow： row wrap 属性将 flex 项排列成一行，并换行到下一行 -
<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>As you rsize the browser window the flex items should be wrap to the next line.</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>
