Flex布局需设父容器display: flex + flex-wrap: nowrap，子项用flex: 0 0 4px；动画用transform: scaleY()而非height，锚点设transform-origin: bottom；驱动数据应基于音频频段或预设强度档位加偏移，避免纯随机；注意Safari需用户手势后resume AudioContext，移动端控制柱子数量与will-change优化性能。
flex布局让律动柱子横向排列不溢出
柱子排不齐、换行错位、宽度忽大忽小——根本原因是没锁死容器的display: flex行为和子项的弹性约束。默认flex-wrap: wrap会让柱子在窄屏下折行，而flex: 0 0 auto又容易被内容撑开。
- 父容器必须设
display: flex+flex-wrap: nowrap，禁用换行 - 每个柱子用
flex: 0 0 4px（或固定width: 4px），避免被flex-grow拉伸 - 加
overflow-x: hidden防滚动条干扰视觉节奏 - 别用
%或em设柱子宽度，像素值最稳，比如width: 3px
@keyframes实现上下拉伸但不抖动
直接用height动画会触发重排，柱子边缘发虚、帧率掉；用transform: scaleY()才是真解法——GPU加速、不占文档流、动画顺滑。
- 关键帧只写
transform: scaleY(0.2)到scaleY(1.8)，别混用height和transform - 起始态必须是
transform: scaleY(1)，否则首次渲染会跳变 - 加
transform-origin: bottom，确保拉伸从底部锚定，像真实声波那样“从地往上顶” - 动画时长控制在
100ms–300ms之间，太长显得迟钝，太短看不出律动
用Math.random()生成随机高度但保持节奏感
全靠Math.random()瞎抖，结果就是乱跳、没律动逻辑——人耳听的是相对强度变化，不是绝对随机数。
- 不要每个柱子独立调
Math.random()，改用一个音频频段数据（如Web Audio API的analyser.getByteFrequencyData()）驱动整组柱子 - 如果只是模拟，可预设几组「强度档位」：
[0.3, 0.6, 1.0, 0.7, 0.4]，再用Math.floor(Math.random() * 5)选索引 - 给每根柱子加轻微偏移：比如第
i根柱子的缩放值 = 档位值 × (0.9 + i * 0.02)，制造错落感 - 禁止用
setTimeout逐个触发动画，统一用CSSanimation-delay做交错，例如animation-delay: calc(var(--i) * 0.03s)
实际绑定音频数据时的兼容性坑
Chrome里analyser返回数据正常，Safari却常为全0——不是代码错，是iOS Safari对AudioContext的自动播放策略更严。
立即学习“前端免费学习笔记（深入）”；
- 必须等用户手势（如
click或touchstart）后才调用audioContext.resume()，否则分析器静音 - Firefox对
getByteFrequencyData()返回数组长度敏感，建议固定用32或64，别盲目传analyser.frequencyBinCount - 移动端要注意
transform: scaleY()在低DPR屏幕（如旧iPad）上可能糊边，加will-change: transform提升渲染质量 - 别把柱子数量设成100+，iOS Safari对大量
transform动画的GC压力明显，32根够用且流畅
真正难的不是写出来，是让每根柱子的拉伸既响应音频又不抢戏——它得是背景里的呼吸感，不是前台的抽搐。
