CSS flex 属性值说明
| 值 | 描述 |
|---|---|
| flex-grow | 指定该项目（item）（item）相对于相同容器的其余部分的成果会增加多少。 |
| flex-shrink | 指定该项目（item）（item）将相对于同一容器的其余部分缩小多少。 |
| flex-basis | 指定“auto”，“继承”或者数字后跟“％”，“PX”，“EM”等项目（item）（item）的长度。 |
| auto | 相当于1 1 auto。 |
| initial | 相当于1 0 auto。 |
| none | 相当于0 0 auto。 |
| inherit | 从其父元素继承此属性。 |
语法
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;
flex 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: -webkit-flex;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex 属性示例</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>
结果
具有“flex-grow”值的 flex 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex;
/* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(2) {
-webkit-flex-grow: 4;
}
.box div:nth-of-type(3) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(4) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(5) {
-webkit-flex-grow: 1;
}
/* Standard syntax */
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow example</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>
具有“flex-shrink”值的 flex 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex;
display: flex;
}
.box div {
-webkit-flex-grow: 1;
-webkit-flex-shrink: 2;
-webkit-flex-basis: 100px;
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
-webkit-flex-shrink: 5;
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>
flex 属性定义了弹性长度的组成部分。
它是以下属性的简写：
- flex-grow
- flex-shrink
- flex-basis
flex-shrink 和 flex-basis 是可选的，例如：我们不必将它们包含在 flex 声明中。
flex 属性是 CSS3 属性之一。
此属性是弹性框布局模块的一部分。
如果没有弹性项目（item）（item），则 flex 属性不会有任何影响。
当我们在速记声明中不包含 flex-grow 属性时，该值默认设置为 1.
当我们在速记声明中不包含 flex-shrink 属性时，该值默认设置为 1.
请注意，当分布负空间时，flex-shrink 因子乘以 flex-basis。
当不包含 flex-basis 属性时，其值设置为 0%。
“Auto”是 flex 属性的默认值。
此值根据宽度/高度属性调整项目（item）（item）的大小。
如果项目（item）（item）的主要大小属性设置为“自动”，这将根据其内容调整弹性项目（item）（item）的大小。
“初始”根据其宽度/高度属性（如果未设置则为其内容）调整项目（item）（item）的大小，使弹性项目（item）（item）在剩余可用空间时不灵活，但在没有足够空间时允许其缩小到最小尺寸。
对齐技术或者自动边距用于沿主轴对齐 flex 项目（item）（item）。
“无”根据宽度和高度属性调整项目（item）（item）的大小。
它是完全不灵活的。
注意： flex-grow 和 flex-shrink 的初始值在不包含在 flex 简写声明中时与它们的默认值不同，以便更好地适应常见情况。
| 初始值 | 0 1 auto |
|---|---|
| 应用于 | Flex项目（item）（item），包括流中的伪元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.flex =“1”; |
日期：2020-06-02 22:14:30 来源：oir作者：oir