space-between需容器有明确宽度才能分配剩余空间，否则因无空可分而失效；它只均分项目间间隙，不控制项目自身宽度。
flex布局下justify-content: space-between为什么按钮还是挤在左边
因为父容器没设宽度，space-between需要“剩余空间”才能分配。它不是让按钮等宽，而是把子项之间的空隙均分——如果容器本身只包裹内容（比如display: inline-flex或未设width），那就没空可分。
常见错误现象：display: flex写了，justify-content: space-between也写了，但三个按钮全堆左上角。
- 给父容器加
width: 100%（或具体像素值），尤其当它是div且无宽度声明时 - 避免用
inline-flex却不设宽——它默认不占满行 - 检查是否误启
flex-wrap: wrap且内容超宽，导致第一行只剩一个按钮，space-between直接失效 - 单个按钮时
space-between完全无效，行为等同flex-start
要等宽填满容器，不能只靠space-between
justify-content: space-between只管间隙，不管子项宽度。想让5个按钮严格等宽、无缝撑满一行，必须让每个按钮主动伸展。
实操建议：每行设为display: flex，按钮用flex: 1，并加min-width: 0防文字溢出撑破布局。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，能真正均分子容器主轴空间 - 必须配
min-width: 0，否则按钮内文字过长时会突破flex约束，破坏等宽效果 - 不要用
width: 20%硬写——百分比在有gap或边框时会算不准，且响应式下易错位 - 若按钮含图标+文字，确保
white-space: nowrap和overflow: hidden配合使用，避免换行破坏高度一致性
多行多列（如3×5）怎么保持行列对齐
单纯对整体容器设display: flex; flex-direction: column不够——每行高度可能因内容不同而参差，视觉上就“不整齐”。
关键在分层控制：外层控行数与垂直分布，每行内部控列宽与高度。
- 外层容器设
display: flex; flex-direction: column; height: 100%（需父级有高） - 每行用
display: flex+flex: 1，让三行均分垂直空间 - 每行内按钮统一用
flex: 1; min-width: 0; height: 100%，强制等高 - 避免给按钮设
margin——它会破坏flex: 1的精确均分；间距用gap更可靠
Bootstrap里gap类和justify-content混用要注意什么
gap是现代Flex/Grid原生属性，Bootstrap的gap-3只是封装了gap: 1rem。但它和justify-content逻辑冲突：一个靠间隙留白，一个靠分配剩余空间。
比如d-flex justify-content-center gap-3会让按钮居中，但间隙固定；而justify-content-space-between加gap会导致首尾按钮离边缘更远，中间间隙变大——这不是bug，是叠加效果。
- 要均匀分布+固定间隙，优先用
justify-content: space-around或伪元素方案，而非space-between+gap - 响应式场景下，
gap-md-2 gap-lg-3比写媒体查询更简洁，但注意IE11不支持gap，需降级为margin -
flex-wrap开启后，gap会在行与行之间也生效，若不想要，得额外用row-gap: 0
min-width: 0和容器宽度继承链。按钮内容不可控（比如用户昵称长度突变），没这句，flex: 1就形同虚设。 
