Flexbox 布局入门指南
🎯 引言
Flexbox，中文通常称为弹性盒布局，是 CSS3 引入的一种布局模式。它主要用来解决传统布局中，尤其是响应式设计里常见的难题，比如元素对齐、空间分配以及动态调整尺寸等。
学习 Flexbox 之后，你将能轻松创建各种复杂且灵活的页面结构，比如导航栏、卡片布局、弹性网格、垂直居中等。尤其适合移动端和响应式设计，能显著提升开发效率和代码可维护性。
本文将从基础概念讲起，逐步深入介绍 Flexbox 的核心属性，并通过实例演示，帮助你快速掌握这项强大布局技术。
🧠 什么是 CSS Flexbox？
Flexbox（弹性盒子布局）是 CSS 中的一种布局方式，它允许容器内的子元素能够灵活地分配空间和对齐，从而适应不同屏幕尺寸和内容大小。
传统布局如块级布局（block）、内联布局（inline）和浮动布局（float）在某些场景处理起来较为繁琐，而 Flexbox 专注于一维布局（横向或纵向），让我们更简单直观地控制布局。
简单来说：
| 优点 | 作用说明 |
|---|---|
| 灵活分配空间 | 子元素能自动调整宽高，填满容器 |
| 轻松实现居中对齐 | 无需复杂的 margin 或定位技巧 |
| 支持换行和顺序调整 | 子元素可以自动换行或改变排列顺序 |
📚 Flexbox 的基本概念和术语
在学习 Flexbox 之前，先了解几个重要术语：
| 术语 | 解释 |
|---|---|
| Flex 容器 | 使用 display: flex; 或 display: inline-flex; 的父容器 |
| Flex 项目 | Flex 容器内的直接子元素 |
| 主轴（main axis） | Flex 布局的主方向，默认是水平方向（从左到右） |
| 交叉轴（cross axis） | 与主轴垂直的轴，默认是垂直方向（从上到下） |
| 主轴起点 | 主轴的起点位置，比如左侧（默认） |
| 交叉轴起点 | 交叉轴的起点位置，比如顶部（默认） |
Flexbox 就是围绕“主轴”和“交叉轴”这两个维度对元素进行布局和对齐。
🧩 Flex 容器的核心属性
Flex 容器决定其内部元素的总体布局方式。常见的核心属性如下：
| 属性名 | 取值及含义 |
|---|---|
| display | flex 表示块级弹性容器，inline-flex 表示行内弹性容器 |
| flex-direction | 主轴方向，默认 row，可选：row, row-reverse, column, column-reverse |
| flex-wrap | 是否允许换行，默认 nowrap，可选：wrap, wrap-reverse |
| justify-content | 主轴上的对齐方式，常用值：flex-start, flex-end, center, space-between, space-around, space-evenly |
| align-items | 交叉轴子元素的对齐方式，常用值：flex-start, flex-end, center, baseline, stretch |
| align-content | 多行交叉轴对齐方式，仅当有多行时生效，取值与 align-items 类似 |
🧱 弹性项目的属性
Flex 项目（容器内的子元素）也有自己的属性，能控制它们在容器内的表现：
| 属性名 | 取值及含义 |
|---|---|
| order | 控制元素的排列顺序，数字越小越靠前，默认值为 0 |
| flex-grow | 元素的放大比例，默认 0，表示不放大 |
| flex-shrink | 元素的缩小比例，默认 1，表示允许缩小 |
| flex-basis | 元素的初始主轴尺寸，默认 auto，也可以指定具体宽度 |
| align-self | 覆盖容器对该元素的交叉轴对齐方式，取值同 align-items |
🧪 实例演示：用 Flexbox 做一个导航栏
下面我们用 Flexbox 来构建一个简单响应式的导航栏：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Flexbox 导航栏示例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.nav {
display: flex;
background-color: #004466;
padding: 0 20px;
align-items: center; /* 交叉轴垂直居中 */
justify-content: space-between; /* 主轴两端对齐 */
height: 50px;
}
.nav .logo {
color: white;
font-size: 20px;
font-weight: bold;
}
.nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
margin-left: 20px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 8px 12px;
display: block;
}
.nav ul li a:hover {
background-color: #0077aa;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="nav">
<div class="logo">MySite</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</body>
</html>
说明：
.nav设为弹性容器，主轴默认横向排列。justify-content: space-between将 logo 和导航菜单两端对齐。align-items: center保证垂直居中对齐。
🧾 小节总结
- Flexbox 是一维布局模型
- 容器属性控制整体布局，项目属性控制单个元素行为
- 使用 Flexbox 轻松实现居中、对齐、换行等复杂布局
❓ 知识问答（Q&A）
Q：Flexbox 和传统的 float 布局有什么区别？
A：Flexbox 是专门为一维布局设计的，能够更方便地实现对齐和空间分配，而 float 本质是让元素浮动，常用于环绕文本，但无法方便地进行居中和等分布局。
Q：当容器中元素太多时，如何实现换行？
A：设置容器的 flex-wrap: wrap;，Flexbox 会自动将多余元素换到下一行。
Q：为什么使用 align-items: stretch 时，元素会自动撑满交叉轴？
A：因为 stretch 是 Flexbox 默认的交叉轴对齐方式，元素会在交叉轴方向拉伸以填满容器的空间。
🧪 小练习
练习 1：创建一个水平居中的按钮组
用 Flexbox 实现一组按钮，水平居中排列，按钮之间间距均匀。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>按钮组练习</title>
<style>
.button-group {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.button-group button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="button-group">
<button>按钮 1</button>
<button>按钮 2</button>
<button>按钮 3</button>
</div>
</body>
</html>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：实现一个垂直居中的卡片布局
卡片在一个固定高度容器内垂直水平居中显示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>垂直居中卡片</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 2px solid #333;
margin: 50px;
}
.card {
width: 200px;
height: 150px;
background-color: #0099cc;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">居中卡片</div>
</div>
</body>
</html>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握 Flexbox 的基本概念、核心属性及简单布局技巧啦！随着练习的深入，你会发现它的强大和灵活，前端布局将变得更加简单高效。加油！