极客教程CSS Flex-grow
在CSS中，flex-grow属性用于指定一个flex项目在父容器中分配剩余空间的比例。当父容器的空间大于所有flex项目所占空间之和时，flex-grow属性决定了每个项目分配剩余空间的比例。
基本语法
flex-grow属性的基本语法如下：
.item {
flex-grow: <number>;
}
其中，<number>表示一个数字，用于指定项目在分配剩余空间时的比例。默认值为0，表示项目不会分配剩余空间。
示例代码
下面是一个简单的示例代码，展示了如何使用flex-grow属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-grow Example</title>
<style>
.container {
display: flex;
}
.item {
flex-grow: 1;
background-color: lightblue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
代码运行结果:
在这个示例中，我们创建了一个包含3个项目的flex容器，并为每个项目设置了flex-grow: 1;，这意味着每个项目将平均分配剩余空间。
多个项目的flex-grow
当有多个项目设置了flex-grow属性时，它们将按照各自的flex-grow值来分配剩余空间。如果一个项目的flex-grow值是2，另一个项目的flex-grow值是1，那么前者将获得的剩余空间是后者的两倍。
示例代码
下面是一个示例代码，展示了多个项目的flex-grow属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-grow Example</title>
<style>
.container {
display: flex;
}
.item {
padding: 10px;
margin: 5px;
}
.item1 {
flex-grow: 1;
background-color: lightblue;
}
.item2 {
flex-grow: 2;
background-color: lightcoral;
}
.item3 {
flex-grow: 3;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
代码运行结果:
在这个示例中，我们创建了一个包含3个项目的flex容器，并为每个项目设置了不同的flex-grow值。Item 1的flex-grow值为1，Item 2的flex-grow值为2，Item 3的flex-grow值为3。因此，Item 3将获得的剩余空间是Item 1的3倍。
flex-grow与flex-shrink
在flex布局中，除了flex-grow属性外，还有一个flex-shrink属性用于指定项目在空间不足时的收缩比例。当父容器的空间小于所有flex项目所占空间之和时，flex-shrink属性决定了每个项目收缩的比例。
示例代码
下面是一个示例代码，展示了flex-grow和flex-shrink属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-grow and Flex-shrink Example</title>
<style>
.container {
display: flex;
}
.item {
padding: 10px;
margin: 5px;
}
.item1 {
flex-grow: 1;
flex-shrink: 1;
background-color: lightblue;
}
.item2 {
flex-grow: 2;
flex-shrink: 0;
background-color: lightcoral;
}
.item3 {
flex-grow: 3;
flex-shrink: 2;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
代码运行结果:
在这个示例中，我们为每个项目同时设置了flex-grow和flex-shrink属性。Item 1的flex-grow和flex-shrink值都为1，Item 2的flex-grow值为2，flex-shrink值为0，Item 3的flex-grow值为3，flex-shrink值为2。这意味着Item 1和Item 2在空间不足时将等比例收缩，而Item 3将比其他项目更快地收缩。
flex-grow与flex-basis
除了flex-grow和flex-shrink属性外，还有一个flex-basis属性用于指定项目在主轴上的初始大小。当flex-grow和flex-shrink属性都设置为0时，flex-basis属性将决定项目的大小。
示例代码
下面是一个示例代码，展示了flex-grow、flex-shrink和flex-basis属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-grow, Flex-shrink and Flex-basis Example</title>
<style>
.container {
display: flex;
}
.item {
padding: 10px;
margin: 5px;
}
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
background-color: lightblue;
}
.item2 {
flex-grow: 2;
flex-shrink: 0;
flex-basis: 150px;
background-color: lightcoral;
}
.item3 {
flex-grow: 3;
flex-shrink: 2;
flex-basis: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
代码运行结果:
在这个示例中，我们为每个项目同时设置了flex-grow、flex-shrink和flex-basis属性。Item 1的flex-grow和flex-shrink值都为1，flex-basis值为100px，Item 2的flex-grow值为2，flex-shrink值为0，flex-basis值为150px，Item 3的flexgrow值为3，flex-shrink值为2，flex-basis值为200px。这意味着Item 1和Item 2在空间不足时将等比例收缩，而Item 3将比其他项目更快地收缩，并且它们的初始大小分别为100px、150px和200px。
flex-grow与flex-wrap
在flex布局中，还有一个flex-wrap属性用于指定项目是否换行显示。当父容器的空间不足以容纳所有项目时，flex-wrap属性决定了项目是否换行显示。
示例代码
下面是一个示例代码，展示了flex-grow和flex-wrap属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-grow and Flex-wrap Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
padding: 10px;
margin: 5px;
width: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
代码运行结果:
在这个示例中，我们创建了一个包含6个项目的flex容器，并为每个项目设置了flex-grow: 1;，并且设置了flex-wrap: wrap;，这意味着项目将在空间不足时换行显示。
总结
flex-grow属性是flex布局中用于指定项目在父容器中分配剩余空间的比例的重要属性。通过合理设置flex-grow属性，我们可以实现灵活的布局效果，使得项目在不同空间条件下能够按照我们的需求进行分配和收缩。结合其他flex属性如flex-shrink、flex-basis和flex-wrap等，我们可以更加灵活地控制项目的布局和显示效果。