弹性盒子通过display:flex实现一维布局，flex-direction控制方向，justify-content和align-items定义主轴与交叉轴对齐，flex属性调节项目伸缩，常用于导航、居中等响应式设计。
弹性盒子（Flexbox）是 CSS 中一种强大的布局模式，适合在页面上对齐、分布和调整元素的大小。它特别适用于一维布局——也就是沿着一行或一列排列元素。
启用弹性容器
要使用弹性布局，首先要将一个容器设置为弹性容器：
.container {
display: flex;
}
这样，该容器内的所有直接子元素都会成为弹性项目，并默认沿水平方向（主轴）排列。
控制主轴方向
通过 flex-direction 可以改变项目排列方向：
立即学习“前端免费学习笔记（深入）”；
- row：从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
.container {
display: flex;
flex-direction: column;
}
对齐与分布
弹性盒子提供了多种方式来对齐项目：
-
justify-content：控制项目在主轴上的对齐方式
- flex-start（靠前）
- center（居中）
- flex-end（靠后）
- space-between（两端对齐，中间等距）
- space-around（项目周围留白）
-
align-items：控制项目在交叉轴上的对齐方式
- stretch（拉伸填满容器）
- flex-start（顶部对齐）
- center（垂直居中）
- flex-end（底部对齐）
.container {
display: flex;
justify-content: center;
align-items: center;
}
这段代码常用于让内容在容器中水平垂直居中。
弹性项目属性
每个子元素也可以单独设置行为：
- flex-grow：定义项目的放大比例（默认0）
- flex-shrink：定义缩小比例
- flex-basis：项目占据的主轴空间（类似 width）
简写形式：flex: 1 表示该项目可以伸展填满剩余空间。
.item {
flex: 1;
}
多个项目设置 flex: 1 时，它们会平均分配父容器的可用空间。
基本上就这些核心用法。掌握 display: flex 和几个关键属性后，就能快速实现响应式的一行或一列布局，比如导航栏、卡片组、居中弹窗等。不复杂但容易忽略细节，多练几次就顺了。
