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>
