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

CSS flex-grow 属性决定了 flex 项应沿其主轴在 flex 容器中占用多少额外空间。

当 flex 容器中的多余空间大于 flex 物料的组合尺寸时，将根据每个物料的生长因子在所有物料的 flex 增长因子总和中的比例进行分配。

可能的值

<number> - 任何有效的正数。负值无效。

适用于

Flex 项目，包括流入伪元素

语法


flex-grow: <number>;

CSS flex-grow - <数量>

以下示例演示了 flex-grow： 3 属性将第一个 flex 项的增长量是其他项的三倍 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 width: 75px;
	 	 	 height: 50px;
	 	}
	 	.flex-item1 {
	 	 	 flex-grow: 3;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	</div>
</body>
</html>

<< CSS Flexbox - flex-flow 属性 CSS Flexbox - flex-shrink 属性 >>