Flex布局通过display: flex创建弹性容器，子元素按主轴排列并支持自动缩放。使用flex-direction、flex-wrap设置方向与换行，justify-content和align-items控制对齐。子元素的flex属性（flex-grow、flex-shrink、flex-basis）决定其在容器中的伸缩行为，如flex: 1等分剩余空间，flex: 0 0 100px固定尺寸。常见场景包括等分布局与固定+自适应组合。需注意容器宽度、min-width限制及文本溢出问题，设min-width: 0可优化压缩表现。
在CSS中，Flex布局（弹性盒子布局）是一种高效的布局方式，特别适合在容器内对子元素进行动态排列和尺寸分配。通过display: flex定义一个弹性容器后，其子元素会自动成为弹性项目，并可以利用弹性属性实现自动缩放。
flex容器的基本设置
要启用弹性布局，先将父容器设为flex容器：
.container {
display: flex;
}
此时，所有直接子元素会沿主轴（默认为水平方向）排列。你可以通过以下属性调整主轴方向和换行行为：
- flex-direction：设置主轴方向（row、row-reverse、column、column-reverse）
- flex-wrap：控制是否换行（nowrap、wrap、wrap-reverse）
- justify-content：主轴上的对齐方式
- align-items：交叉轴上的对齐方式
子元素的弹性缩放原理
弹性缩放的核心在于flex属性，它是flex-grow、flex-shrink和flex-basis的简写形式。
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 1 1 0; /* grow shrink basis */
}
- flex-grow：定义项目的放大比例，默认为0，即不放大。若所有项目都设为1，则等分剩余空间；某个设为2，则占据更多空间
- flex-shrink：定义项目缩小比例，默认为1。当空间不足时，按比例缩小。设为0则不参与压缩
- flex-basis：项目在分配多余空间前的初始大小，可设为像素值或百分比，也可用auto（基于内容）
例如，两个子元素分别设置flex: 2和flex: 1，它们将按2:1的比例分配容器的可用空间。
常见使用场景示例
假设希望三个子元素平均填满容器：
.container {
display: flex;
}
.item {
flex: 1;
}
每个子元素都会等比例拉伸以填满整行。
如果其中一个固定宽度，其余自适应：
.item-fixed {
flex: 0 0 100px; /* 不放大不缩小，基础宽度100px */
}
.item-fluid {
flex: 1; /* 占据剩余所有空间 */
}
注意事项与技巧
弹性缩放依赖于容器的总可用空间。注意以下几点：
- 父容器需有明确宽度或处于可伸缩上下文中
- 子元素的最小尺寸可能受
min-width限制，默认为auto，有时需设为0才能正常压缩 - 文本类内容建议设置
min-width: 0避免溢出 - 使用
flex: 1是flex: 1 1 0的简写，常用于“占满剩余空间”
基本上就这些。掌握flex容器和子元素的弹性三属性，就能灵活应对大多数自适应布局需求。
