CSS - Flexbox - flex-wrap 属性

CSS flex-wrap 属性确定 flex 项目是应保留在单行上，还是允许换行到多行上。当允许换行时，它确定线的堆叠方向。

可能的值

nowrap - 默认值。弹性物料放置在一条线中，该行可能会延伸到弹性容器之外。根据 flex-direction 的值，交叉起始由起始点或之前定义。
wrap − flex 项目分成多行。交叉启动与开始相同或之前相同，具体取决于 flex-direction 值，而交叉端与给定的交叉启动相反。
wrap-reverse − 它包裹类似于 wrap 的 flex 项目，但 cross-start 和 cross-end 的位置是互换的。

适用于

Flex 容器。

语法


flex-wrap: nowrap|wrap|wrap-reverse;

CSS flex-wrap - nowrap 值

以下示例演示了 flex-wrap： nowrap 属性，当浏览器窗口水平调整大小时，flex 项将保持在同一行上，即使它们溢出了 flex 容器 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-wrap: nowrap;
	 	 	 background-color: green;
	 	}
	 	.flex-container>div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 10px;
	 	 	 width: 50px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<h3>As you resize the browser window, flex items will remain on a single line.</h3>
	 	<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-wrap - 包装值

以下示例演示了 flex-wrap： wrap 属性允许 flex 项目在无法放入一行中时分成多行 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 background-color: green;
	 	}
	 	.flex-container>div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 10px;
	 	 	 width: 50px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<h3>As you resize the browser window, flex items should move to a new line inside their container.</h3>
	 	<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-wrap - 换行-反向

以下示例演示了 flex-wrap： wrap-reverse 属性将 flex 项排列在多行中，并以相反的顺序包装 flex 项 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 flex-wrap: wrap-reverse;
	 	 	 background-color: green;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 width: 50px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<h3>As you resize the browser window, flex items should move to a new line in reverse order.</h3>
	 	<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>

打印本页