Flexbox 是 CSS 中用于简化布局的模型，通过 display: flex 创建弹性容器，子元素成为弹性项目。使用 flex-direction 控制主轴方向，justify-content 和 align-items 分别定义主轴与交叉轴对齐方式，flex-wrap 允许换行。结合 flex: 1 实现均分空间，适用于响应式设计中的卡片或导航布局。在小屏幕上可通过媒体查询设置 flex-direction: column 实现垂直堆叠，提升移动端体验。利用 order 可调整项目显示顺序，align-content 处理多行间距，margin: auto 或 justify-content 与 align-items 配合实现居中效果。例如登录框可在容器中水平垂直居中。掌握这些核心属性后，可高效解决多数布局问题。
Flexbox 是 CSS 中一种强大的布局模型，特别适合构建响应式界面和实现元素对齐。它通过简化容器内子元素的排列方式，让开发者更灵活地处理不同屏幕尺寸下的布局需求。
理解 Flex 容器与项目
使用 Flexbox 的第一步是定义一个弹性容器。只要将 display: flex 或 display: inline-flex 应用于父元素，其直接子元素就自动成为弹性项目。
常见设置如下：
- display: flex; — 启用块级弹性容器
- flex-direction: 控制主轴方向（row、column、row-reverse、column-reverse）
- justify-content: 定义主轴上的对齐方式
- align-items: 定义交叉轴上的对齐方式
- flex-wrap: 允许项目换行
响应式布局中的实用技巧
在不同设备上保持良好视觉效果，关键在于合理利用 Flexbox 的自适应特性。
- 使用 flex: 1 让项目均分可用空间，适合卡片布局或导航栏
- 结合 flex-direction: column 在小屏幕上垂直堆叠内容
- 通过媒体查询切换 flex-wrap: wrap 实现多行布局，避免溢出
- 利用 order 属性调整项目显示顺序，提升移动端体验
例如，一个三栏布局在桌面端横向排列，在手机上可改为单列堆叠：
.container {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
精准控制对齐与间距
Flexbox 提供了多种对齐选项，能快速解决常见的布局难题。
- justify-content: center 水平居中项目
- align-items: center 垂直居中单行项目
- align-content: space-between 多行时分配行间距
- margin: auto 在 flex 项目上也能实现自动对齐
若要实现一个始终居中的登录框：
.modal {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
基本上就这些。掌握 Flexbox 的核心属性后，大多数布局问题都能简洁高效地解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
