CSS Flexbox - flex-direction 属性

CSS flex-direction 属性确定 flex 项在 flex 容器中的放置方向。Flex 项目可以按水平行或垂直列排列。

可能的值

row − flex 容器的主轴遵循文本的方向。主起点和主终点与内容的方向对齐。
row-reverse - 与行值相同，但与内容方向相比，沿主轴的主起点和主端点是反向的。
column − 柔性容器的主轴与块轴相同。主开始点和主结束点对应写入模式中的前后点。
column-reverse- 与 column 相同，但 main-start 和 main-end 点与内容流的方向相反。

适用于

Flex 容器

语法


 flex-direction: row|row-reverse|column|column-reverse;

CSS flex-direction - 行值

以下示例演示 flex-direction： row 属性在水平方向上从左到右排列 flex 项。


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-direction: 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>
</body>
</html>

CSS flex-direction - 行反向值

以下示例演示了 flex-direction： row-reverse 属性在水平方向上排列 flex 项，但顺序从右到左相反 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-direction: 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>
</body>
</html>

CSS flex-direction - 列值

以下示例演示了 flex-direction： column 属性在垂直方向上从上到下排列 flex 项 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 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>
</body>
</html>

CSS flex-direction - 列反向值

以下示例演示了 flex-direction： column-reverse 属性在垂直方向上排列 flex 项，但顺序从下到上相反 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-direction: column-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>
</body>
</html>

打印本页