CSS Flexbox - flex-flow 属性_CSS 菜鸟教程

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>

<< CSS Flexbox - flex-direction 属性 CSS Flexbox - flex-grow 属性 >>