CSS Flexbox - flex 属性

CSS flex 属性定义 flex 项如何沿 flex 容器扩展、收缩和分配空间。此属性是以下 CSS 属性的简写：

可能的值

initial− 根据其 width 和 height 属性调整项目的大小。相当于 flex： 0 1 auto
auto − 项目的大小由其 width 和 height 属性决定，扩展以填充 Flex 容器中的额外空间，并缩小到其最小大小以适应容器。它等于 flex： 1 1 auto。
none − 项目的大小保持固定，并且在 Flex 容器的尺寸发生变化时不会扩展或收缩。它等于 flex： 0 0 auto。
<'flex-grow'> − 一个数字，指定项目相对于其他灵活项目将增长多少
<'flex-shrink'>− 一个数字，指定该项相对于其他灵活项的收缩量。
<'flex-basis'> - 项目的长度。（auto、%、px、em 等）

适用于

Flex 项，包括流式伪元素

DOM 语法


object.style.flex = "auto|none|<number>";

CSS Flex - auto 值

以下示例演示了 flex： auto 属性会均匀地扩大和缩小 flex 项以填充可用空间 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;
	 	}
	 	.flex-container>div {
	 	 	 background-color: yellow;
	 	 	 margin: 10px;
	 	 	 padding: 15px;
	 	 	 flex: auto;
	 	}
</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 - none 值

以下示例演示了 flex： none 属性可防止 flex 项增长或尖叫以填充可用空间 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;
	 	}
	 	.flex-container>div {
	 	 	 background-color: yellow;
	 	 	 margin: 10px;
	 	 	 padding: 15px;
	 	 	 flex: none;
	 	}
</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 - <number> 值

以下示例演示了 flex： 2 属性，则第二个网格项将占用 Flex 容器中其他 flex 项的两倍空间 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;	
	 	}
	 	.flex-container>div {
	 	 	 background-color: yellow;
	 	 	 margin: 10px;
	 	 	 padding: 15px;
	 	}
	 	.flex-item2 {
	 	 	 flex: 2;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	</div>
</body>
</html>

打印本页