CSS Flexbox 基本原理
什么是 Flex 容器与 Flex 项
在 Flexbox 布局中，Flex 容器通过 display: flex 将子元素排成一个主轴和一个交叉轴的结构，Flex 项则是在容器内按顺序排列的子元素。通过把容器设定为 display: flex，就可以让子项在主轴方向自动分布并响应容器尺寸的变化。
使用中经常接触到的属性包括 flex-direction、justify-content、align-items，以及项上的 flex、flex-grow、flex-shrink、flex-basis 等等。
这些属性共同决定了子项在主轴和交叉轴上的对齐与分配方式。
/* 基本的 Flex 容器与项示例 */
.container { display: flex; }
.item { flex: 0 0 auto; } /* 默认行为：不拉伸，按内容宽度排列 */
flex:1 的含义
在 flex 的简写形式中，flex: 1 等价于 flex-grow: 1、flex-shrink: 1、flex-basis: 0，因此子项会在主轴方向按比例消耗剩余空间并保持等分效果。
这也是实现“等分布局”的关键语义。
通过将所有需要平分剩余空间的子项设为 flex: 1，容器内的可用空间会被均匀分配给这些子项，从而实现等分布局的效果。
/* 给子项分配相等的剩余空间 */
.container { display: flex; }
.item { flex: 1 1 0; } /* 等分，且尽可能填满容器 */
如何用 flex:1 实现等分布局
让多项等分且自适应的技巧
如果你希望水平排列的多项在宽度变化时保持等分，请将每个子项的 flex 设置为 1，并确保容器具备可用的主轴空间。
这样当容器宽度增加或减少时，所有子项的宽度会以相等的比例自动调整。
注意，若某些子项内容超过了分配的宽度，容器会根据 min-width、min-content 等行为产生溢出，需要结合其他属性进行约束。
/* 三列等分，等宽的子项 */
.container { display: flex; }
.item { flex: 1; min-width: 0; } /* 避免文本溢出导致换行或溢出超出父容器宽度 */
横向或纵向的等分切换
通过改变 flex-direction 可以实现水平或垂直方向的等分布局：row（水平）或 column（垂直）。这一点对于响应式设计尤为重要，因为你可能需要在不同屏幕下保持等分效果。
在多列场景中，gap 属性（或 margin）的配合也能让等分变得更整齐，避免边界处的拥挤感。
/* 水平方向等分与列间距 */
.container { display: flex; gap: 12px; }
.item { flex: 1 1 0; }
自动分配空间的细节与边界
flex-basis、最小宽度、换行策略
flex-basis 决定了子项在分配剩余空间前的初始主轴尺寸，若设为 0，则多项会尽量靠近等分；若设为具体值，则以该值为起点进行分配。
min-width 则用于限制子项在缩小时的最小尺寸，避免过度压缩引发不可读或不可用。
对于需要自适应换行的场景，可以在容器上设置 flex-wrap，从而在容器宽度不足时自动换行，保持每一行的等分效果。
/* 支持换行的等分布局 */
.container { display: flex; flex-wrap: wrap; }
.item { flex: 1 1 200px; min-width: 200px; }
多行布局中的等分策略
在多行布局中，flex-wrap 与每行的子项共同决定了视觉上的等分效果。不同的行可能具有不同的项数量，因此每行的实际宽度分配会在运行时动态计算。
为了维持稳定的视觉体验，可以在需要的地方结合 justify-content、align-items、以及 gap 来调整对齐方式和间距。
/* 保证每行中的项都尽量等宽，并对齐边距 */
.container { display: flex; flex-wrap: wrap; justify-content: stretch; gap: 8px; }
.item { flex: 1 1 180px; }
常见坑与调试技巧
调试要点：检查 flex-basis、wrap、gap
常见问题包括某些子项因为 flex-basis 与内容宽度冲突而出现偏移，或者在使用 gap 时被浏览器对齐方式影响。通过将 flex-basis 设置为 0 并控制 min-width，可以避免不必要的挤压与崩溃。
另外，开启 flex-wrap 能让超出宽度的项换行，而不是被挤出视图。这些设置对实现“等分布局”的稳定性极为关键。
/* 调试示例：避免挤压导致的错位 */
.container { display: flex; flex-wrap: wrap; gap: 10px; }
.item { flex: 1 1 0; min-width: 180px; }
图片、文本、按钮混排时的处理
当子项包含图片、文本、按钮等不同类型的内容时，flex: 1 的等分策略仍然有效，但需要确保图片不超出分配宽度，可以通过设置 object-fit、max-width、以及对文本设置 overflow 与 text-overflow 来提升可读性与美观度。
另外，若要在某些项中保留固定宽度的按钮，可以将该项单独设定 flex: 0 0 auto，让按钮保持稳定宽度，而其他项继续等分。
/* 混排示例：固定按钮宽度，其他项等分 */
.container { display: flex; gap: 8px; }
.item { flex: 1 1 auto; min-width: 0; }
.btn { flex: 0 0 120px; }
