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

CSS flex-shrink 属性指定 flex 项的弯曲收缩因子。当 flex 物料的组合尺寸大于 flex 容器的尺寸时，物料将根据其 flex-shrink 值按比例收缩。

flex-shrink 通常与 flex-grow 和 flex-basis 一起使用，通常使用 flex 简写来定义。

可能的值

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

适用于

Flex 项目，包括流入伪元素。

语法

flex-shrink: <number>;

CSS flex-shrink - <数量>

以下示例演示了 flex-shrink： 2 属性在 flex 容器中没有足够的空间时，与其他 flex items 相比，flex items 收缩了两倍 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;
	 	 	 width: 500px;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	 	 height: 50px;
	 	 	 flex-basis: 100px;
	 	}
	 	.flex-item {
	 	 	 flex-shrink: 2;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 <div class="flex-item">Flex item 4</div>
	 	 	 <div>Flex item 5</div>
	 	 	 <div>Flex item 6</div>
	 	</div>
</body>
</html>

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