极客教程CSS Flex纵向布局高度占满
在网页布局中，经常会遇到需要让元素的高度占满整个父容器的情况。使用CSS Flex布局可以很方便地实现这一需求。本文将详细介绍如何使用CSS Flex布局实现纵向布局，并让元素的高度占满整个父容器。
1. 使用flex-direction: column实现纵向布局
首先，我们需要将父容器的flex-direction属性设置为column，这样子元素就会按照纵向方向排列。接下来，我们可以使用flex: 1来让子元素的高度占满整个父容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
flex: 1;
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>
</body>
</html>
Output:
在上面的示例中，我们创建了一个父容器.container，并设置其flex-direction为column，高度为300px。子元素.item使用flex: 1来让其高度占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
2. 使用align-items: stretch让子元素高度占满
除了使用flex: 1来让子元素的高度占满整个父容器外，我们还可以使用align-items: stretch来实现相同的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: stretch;
height: 300px;
}
.item {
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>
</body>
</html>
Output:
在上面的示例中，我们将父容器.container的align-items属性设置为stretch，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
3. 使用flex-grow: 1让子元素高度占满
另一种常用的方法是使用flex-grow: 1来让子元素的高度占满整个父容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
flex-grow: 1;
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>
</body>
</html>
Output:
在上面的示例中，我们将子元素.item的flex-grow属性设置为1，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
4. 使用min-height: 100%让子元素高度占满
除了使用Flex属性外，我们还可以使用min-height: 100%来让子元素的高度占满整个父容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
min-height: 100%;
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>
</body>
</html>
Output:
在上面的示例中，我们将子元素.item的min-height属性设置为100%，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
5. 使用vh单位实现纵向布局高度占满
另一种常用的方法是使用vh单位来实现纵向布局高度占满。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.item {
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>
</body>
</html>
Output:
在上面的示例中，我们将父容器.container的高度设置为100vh，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
6. 使用calc()函数实现纵向布局高度占满
除了使用vh单位外，我们还可以使用calc()函数来实现纵向布局高度占满。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: calc(100vh - 20px);
}
.item {
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>
</body>
</html>
Output:
在上面的示例中，我们使用calc(100vh - 20px)来计算父容器.container的高度，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。
7. 使用flex-wrap: wrap实现纵向布局高度占满
如果子元素的数量超过父容器的高度，我们可以使用flex-wrap: wrap来实现纵向布局高度占满。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
}
.item {
flex: 1;
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>
</body>
</html>
Output:
在上面的示例中，我们将父容器.container的flex-wrap属性设置为wrap，这样子元素的高度会自动占满整个父容器。即使子元素的数量超过父容器的高度，也会自动换行显示。运行代码后，可以看到所有子元素的高度均占满了整个父容器。
8. 使用align-self: stretch让单个子元素高度占满
有时候我们只需要让单个子元素的高度占满整个父容器，可以使用align-self: stretch来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
background-color: lightblue;
}
.item:nth-child(2) {
align-self: stretch;
}
</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>
Output:
在上面的示例中，我们使用align-self: stretch来让第二个子元素.item:nth-child(2)的高度占满整个父容器。其他子元素的高度仍然按照内容自适应。运行代码后，可以看到第二个子元素的高度占满了整个父容器。
9. 使用flex-grow: 2实现高度占比布局
有时候我们需要让不同子元素的高度按照一定比例分配，可以使用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纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
background-color: lightblue;
}
.item:nth-child(1) {
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 2;
}
.item:nth-child(3) {
flex-grow: 3;
}
</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>
Output:
在上面的示例中，我们分别给三个子元素.item设置不同的flex-grow值，分别为1、2、3，表示它们的高度占比为1:2:3。运行代码后，可以看到三个子元素的高度按照设定的比例分配。
10. 使用flex: 1 1 auto实现高度占满布局
最后，我们可以使用flex: 1 1 auto来实现高度占满布局，这样子元素的高度会自动占满整个父容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex纵向布局高度占满</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item {
flex: 1 1 auto;
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>
</body>
</html>
Output:
在上面的示例中，我们将子元素.item的flex属性设置为1 1 auto，这样子元素的高度会自动占满整个父容器。运行代码后，可以看到三个子元素的高度均占满了整个父容器。