去创作
以下是不同常见场景下的 Flexbox 示例汇总，涵盖了常用的布局和对齐方式。
1. 基础布局：水平方向排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
<title>Flexbox 水平排列</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果： 三个 .box 元素会水平排列。
2. 垂直方向排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-direction: column; /* 设置为垂直排列 */
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
}
</style>
<title>Flexbox 垂直排列</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果： 三个 .box 元素会垂直排列。
3. 水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
height: 100vh; /* 使容器充满整个视口 */
}
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<title>Flexbox 水平居中</title>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
效果： .box 元素在页面水平方向居中。
4. 垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
}
.box {
width: 100px;
height: 100px;
background-color: lightyellow;
}
</style>
<title>Flexbox 垂直居中</title>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
效果： .box 元素在页面垂直方向居中。
5. 完全居中（水平 + 垂直居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
}
.box {
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
<title>Flexbox 完全居中</title>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
效果： .box 元素在页面的水平和垂直方向上都居中。
6. 均匀分布（justify-content: space-between）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: space-between; /* 均匀分布 */
}
.box {
width: 100px;
height: 100px;
background-color: lightgray;
}
</style>
<title>Flexbox 均匀分布</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果： .box 元素在容器中均匀分布，且相邻元素之间的间距相等。
7. 换行布局（flex-wrap: wrap）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightseagreen;
}
</style>
<title>Flexbox 换行布局</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果： 如果容器的宽度不够，.box 元素会自动换行。
8. 项目大小自动调整（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">
<style>
.container {
display: flex;
width: 100%;
}
.box {
flex-grow: 1; /* 项目会增长 */
flex-shrink: 1; /* 项目会收缩 */
flex-basis: 100px; /* 项目的初始大小 */
margin: 10px;
background-color: lightsteelblue;
}
</style>
<title>Flexbox 自适应大小</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果： 每个 .box 元素的初始宽度为 100px，并且可以根据容器的宽度自动伸缩和收缩。
9. 改变排列顺序（order）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightpink;
}
.box1 { order: 3; }
.box2 { order: 1; }
.box3 { order: 2; }
</style>
<title>Flexbox 改变顺序</title>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
效果： .box 元素的显示顺序被重新排列为 2 → 3 → 1，即使它们在 HTML 中的顺序是 1 → 2 → 3。
10. 单个项目垂直居中（align-self）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
height: 100vh;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightyellow;
}
.box2 {
align-self: flex-end; /* 单个项目对齐容器的底部 */
}
</style>
<title>Flexbox 单个项目垂直对齐</title>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box box2">2</div>
</div>
</body>
</html>
效果： box2 会垂直对齐容器的底部，而 box1 会居中。
这些示例涵盖了 Flexbox 常见的布局需求，包括水平/垂直排列、居中对齐、换行、项目顺序调整等。掌握这些技巧后，可以更灵活地使用 Flexbox 来实现复杂的布局。
