9.1 flex-grow 属性
在 Flexbox 中，有不同的工具可以管理 Flex 容器内元素之间的空间分配。
属性 flex-grow、flex-shrink 和 flex-basis 在各种条件下控制 Flex 元素的大小和行为中起着关键作用。现在我们详细看一下这些属性及其使用方法。
属性 flex-grow 定义了 Flex 元素在容器中增长以占据可用空间的能力。flex-grow 的值是一个系数，表示元素可以相对于其他 Flex 元素增长的程度。
取值:
- 整数或小数值
- 默认值：0 (元素不增长)
使用示例:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 500px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.grow-1 {
flex-grow: 1;
}
.grow-2 {
flex-grow: 2;
}
HTML
<div class="container">
<div class="item grow-1">元素 1</div>
<div class="item grow-2">元素 2</div>
<div class="item grow-1">元素 3</div>
</div>
代码解释:
.grow-1: 这些元素有flex-grow: 1;属性，使它们均匀增长-
.grow-2: 此元素有flex-grow: 2;属性，使它相对于flex-grow: 1;的元素增长两倍
9.2 flex-shrink 属性
属性 flex-shrink 定义了当容器中的空间有限时，Flex 元素缩小的能力。flex-shrink 的值是一个系数，表示元素相对于其他 Flex 元素缩小的程度。
取值:
- 整数或小数值
- 默认值：1 (元素可以缩小)
使用示例:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 150px;
}
.shrink-0 {
flex-shrink: 0;
}
.shrink-1 {
flex-shrink: 1;
}
HTML
<div class="container">
<div class="item shrink-0">元素 1</div>
<div class="item shrink-1">元素 2</div>
<div class="item shrink-1">元素 3</div>
</div>
代码解释:
.shrink-0: 这个元素有flex-shrink: 0;属性，表示它无法缩小.shrink-1: 这些元素有flex-shrink: 1;属性，表示它们可以根据需要缩小
9.3 flex-basis 属性
属性 flex-basis 定义了 Flex 元素在分配可用空间之前的初始大小。它可以用各种单位来定义，比如像素、百分比等等。
取值:
- 用各种单位表示的长度 (
px,%,em等) - 默认值：
auto(大小由内容决定)
使用示例:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.basis-auto {
flex-basis: auto;
}
.basis-100px {
flex-basis: 100px;
}
.basis-50percent {
flex-basis: 50%;
}
HTML
<div class="container">
<div class="item basis-auto">元素 1</div>
<div class="item basis-100px">元素 2</div>
<div class="item basis-50percent">元素 3</div>
</div>
代码解释:
.basis-auto: 这元素有flex-basis: auto;属性，表示其大小由内容决定.basis-100px: 这元素有固定初始大小 100 像素.basis-50percent: 这元素的初始大小是容器宽度的 50%
9.4 属性使用
属性 flex 是用于设置 flex-grow, flex-shrink 和 flex-basis 的简写。
它允许在一个属性中管理空间分配的所有三个方面。
语法:
.container {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
使用示例:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-1 {
flex: 1 1 auto;
}
.flex-2 {
flex: 2 1 100px;
}
.flex-3 {
flex: 1 0 50%;
}
HTML
<div class="container">
<div class="item flex-1">元素 1</div>
<div class="item flex-2">元素 2</div>
<div class="item flex-3">元素 3</div>
</div>
代码解释:
-
.flex-1: 这个元素有flex: 1 1 auto;属性，表示它可以随着其他元素一起均匀地增长和缩小，并且其初始大小由内容决定 -
.flex-2: 这个元素有flex: 2 1 100px;属性，表示它可以相对于flex-grow: 1;的元素增长两倍，可以缩小并且具有初始大小 100 像素 -
.flex-3: 这个元素有flex: 1 0 50%;属性，表示它可以增长，但不能缩小，并且其初始大小为容器宽度的 50%
GO TO FULL VERSION