用Flex布局解决中间栏被挤压问题：左右栏设min-width（如200px），中间栏设flex:1，父容器必须display:flex且不设flex-wrap:wrap。
中间栏被挤压，通常是因为父容器没设宽度、子项没设最小宽度，或flex分配逻辑没理清。用 Flex 布局解决，核心就两点：用 flex: 1 让中间栏弹性撑开，同时给左右栏加 min-width 或固定宽，避免被过度压缩。
给左右栏设最小宽度，中间栏 flex: 1
这是最稳妥的做法。左右栏内容少时容易收缩，导致中间栏“被挤”。只要限制它们的最小宽度，就能守住布局底线。
- 左栏和右栏加 min-width: 200px（按需调整）
- 中间栏写 flex: 1，自动占满剩余空间
- 整个容器必须设 display: flex，且不设 flex-wrap: wrap
三栏均分：用 flex: 1 三等份
如果不需要左右栏固定，只想要视觉上平均分布，三栏都写 flex: 1 即可。Flex 会按比例均分可用空间，且默认不压缩到内容以下（除非内容超窄）。
- 三个子项都设 flex: 1
- 若某栏文字特别长又没换行，加 overflow-wrap: break-word 防溢出
- 避免给任意一栏设 width，否则会干扰 flex 分配
更精细控制：用 flex-basis + flex-grow
想让中间栏占 60%，左右各 20%？可以不用百分比 width，改用 flex-basis 搭配 flex-grow。
立即学习“前端免费学习笔记（深入）”；
- 左栏：flex: 0 1 20%（不放大、可缩小、基准 20%）
- 中间栏：flex: 1 1 60%（可放大、可缩小、基准 60%）
- 右栏：flex: 0 1 20%
- 这样既保比例，又允许中间栏在空间充足时弹性扩展
基本上就这些。关键是别混用 width 和 flex，也别忘了给父容器加 display: flex。小屏幕下可配合媒体查询调 min-width，体验更稳。
