本文聚焦“Flex实现双轴组合图”的全流程：先解析设计思路——从双轴的功能拆分（左侧主数据轴、右侧辅助轴、底部类目轴的Flex容器规划），到数据与可视化元素的映射逻辑（如何用Flex的flex-grow「分配剩余空间」、align-items「垂直对齐」等属性适配不同数据量级）；再通过完整代码示例，一步步演示HTML结构搭建、CSS Flex样式配置，以及结合SVG/Canvas实现图表渲染的关键细节（如折线与柱状图的层叠布局、坐标轴标签的自适应排列）。
无论你是刚入门数据可视化的开发者，还是想优化现有布局方案的从业者，都能通过本文快速掌握用Flex高效实现双轴组合图的方法，避开布局错位、响应式失效等常见陷阱。
你有没有过做双轴组合图时，明明数据没错，布局却歪得离谱？左边的柱子和右边的折线对不上类目轴，响应式的时候要么轴标签挤成一团，要么图表直接变形——我去年帮做数据看板的朋友调这个，光对齐问题就改了三版，后来用Flex重新搭结构，半小时搞定，还再也没出过错。今天就把我当时的思路和代码拆给你，没学过复杂布局也能跟着做。
先想明白：双轴组合图的布局痛点，Flex刚好能治
其实双轴组合图的核心矛盾就两个：轴与绘图区的对齐和响应式适配。我朋友之前用float做左右轴，结果左边轴的标签变长时，整个图表往右挤，折线和柱子完全对不上类目；用定位的话，又得算一堆top、left值，响应式的时候改起来要人命。
后来我让他换个思路——把整个图表拆成Flex容器嵌套：外层是垂直方向的Flex（放底部类目轴、中间绘图区+轴、顶部标题），中间绘图区再拆成水平Flex（左侧主轴、中间绘图区、右侧辅助轴）。为啥？因为Flex的align-items能让子元素垂直对齐，justify-content能自动分配空间，不管轴标签多长，类目轴的每个项都能和绘图区的元素精准对应。
比如我朋友之前的类目轴用固定宽度，类目数变多就挤在一起，后来改成Flex的justify-content: space-around，类目项自动均匀分布，响应式时也不会变形；左侧轴和右侧轴用flex-shrink: 0固定宽度，再也不会被挤窄——MDN文档里说Flex的“弹性”不是乱缩，而是按需分配空间，刚好治住了传统布局的“牵一发而动全身”。
手把手搭结构：从HTML到CSS，Flex怎么用才对
我把当时的代码拆成“结构-样式-细节”三步，你跟着写就行。
第一步：拆HTML结构，每个部分职责明确
先搭最外层的容器，把图表分成底部类目轴、中间绘图区+轴、顶部标题（可选）——用Flex垂直排列：
<!-
顶部标题（可选） >
2024年产品销量&利润率走势
<!-
中间核心区域：轴+绘图区 >
<!-
左侧主轴（柱状图的数值轴） >
100
80
60
40
20
0
<!-
中间绘图区（放柱子和折线） >
<!-
柱状图：用绝对定位对应类目轴 >
<!-
折线图：用SVG保持比例 >
<!-
右侧辅助轴（折线的数值轴） >
50%
40%
30%
20%
10%
0%
<!-
底部类目轴 >
这里的关键是每个部分都是独立的Flex容器：chart-container是垂直Flex，chart-body是水平Flex，chart-footer也是水平Flex——职责明确，调样式时不用乱改。
第二步：写CSS，用Flex解决90%的对齐问题
接下来加样式，核心就三个点：固定轴宽、垂直对齐、均匀分布。我直接把当时的CSS贴给你，每句都标了作用：
/ 外层容器：垂直排列，固定高度 /
.chart-container {
display: flex;
flex-direction: column;
height: 400px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/ 中间核心区：水平排列，占满剩余高度 /
.chart-body {
display: flex;
flex: 1; / 占满外层容器的剩余高度 /
align-items: stretch; / 让子元素（轴+绘图区）高度一致 /
margin: 10px 0;
}
/ 左右轴：固定宽度，不缩小 /
.axis {
width: 60px;
flex-shrink: 0; / 响应式时不缩小，避免标签挤在一起 /
display: flex;
flex-direction: column;
justify-content: space-between; / 刻度均匀分布 /
font-size: 12px;
color: #666;
}
/ 左轴刻度靠右对齐，右轴靠左对齐 /
.axis-left { align-items: flex-end; padding-right: 5px; }
.axis-right { align-items: flex-start; padding-left: 5px; }
/ 绘图区：占满中间空间，相对定位放柱子/折线 /
.plot-area {
flex: 1; / 占满中间剩余宽度 /
position: relative;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
/ 柱子样式：绝对定位，底部对齐 /
.bar {
position: absolute;
bottom: 0;
background-color: #4285f4;
border-radius: 2px 2px 0 0;
}
/ 折线图：占满绘图区 /
.line-chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/ 底部类目轴：水平均匀分布 /
.chart-footer {
display: flex;
justify-content: space-around; / 类目项均匀分布 /
font-size: 12px;
color: #666;
}
你看，chart-body的align-items: stretch让左右轴和绘图区高度完全一致，不管轴上有多少刻度，绘图区的顶部和底部都能和轴对齐；axis的flex-shrink: 0保证响应式时轴宽不变，标签不会挤成一团——我朋友之前就是没加这个，结果小屏幕时轴宽缩到40px，标签全叠在一起，加了之后立马好。
关键细节：别踩我踩过的坑
最后说几个亲测有效的小技巧，帮你少走弯路：
chart-footer用justify-content: space-around后，每个category-item的宽度是自动计算的，你可以用JS取每个项的offsetLeft，再设置柱子的left值——比如第一个类目项的offsetLeft是0，第二个是100%/类目数，这样柱子永远对齐类目。 axis的font-size改成10px，width改成40px——我朋友的看板适配手机时就这么改，标签再也没溢出过。 viewBox能保持比例，Flex容器缩放时，折线不会变形——我之前用Canvas画，响应式时还要重新计算坐标，麻烦得很，SVG直接设width: 100%; height: 100%;就搞定。对了，我把当时的Demo存了一份，里面有完整的JS计算逻辑（比如根据数据动态生成柱子高度和折线路径），要是你需要，可以留言找我要。
其实Flex做双轴图的核心就是拆结构——把复杂的图表拆成小的Flex容器，每个容器只管自己的职责，对齐和响应式的问题就交给Flex处理。我朋友后来做新看板，直接复制这个结构，改改数据和颜色就行，再也没找我调过布局。
你要是按这个思路试了，欢迎回来告诉我效果——毕竟布局这事儿，试过才知道有多香～
其实要让左右轴的刻度和柱子、折线对齐，最核心的不是算数值，而是把结构拆对——你得把中间的绘图区+左右轴放进同一个Flex容器里，就像文章里说的chart-body那个盒子。我之前帮朋友调的时候，一开始没拆对，把左右轴放在绘图区外面，结果左边轴的刻度到中间就断了，折线根本对不上。后来改成chart-body用display: flex，再加上align-items: stretch，哎你猜怎么着？左侧轴、绘图区、右侧轴瞬间就一样高了，刻度从顶到底整整齐齐，再也不会出现左边轴到80，右边轴只到70的情况——就像把三个杯子并排放在同一个平托盘里，杯子自然都站得一样高，刻度线也就从上到下对齐了。
底部的类目轴也得用Flex——chart-footer设成justify-content: space-around，类目项（比如“1月”“2月”）会自动均匀分开，不会挤成一团。但光这样还不够，柱子要刚好对着每个类目，得用JS帮个小忙：你可以遍历每个类目项，拿它的offsetLeft值（就是这个类目项距离容器左边的位置），然后把柱子的left样式设成这个值。比如第一个类目项“1月”的offsetLeft是0，第二个“2月”如果是25%（假设总共有4个类目），那第二个柱子的left就设成25%——这样不管屏幕怎么缩放，柱子都能精准“戳”在类目项上面。我朋友之前手动写left值，比如第一个柱子设left: 10%，结果类目数从4个变成5个，立马就错位了；用这个方法之后，不管加多少个类目，柱子都跟着类目项跑，再也没错过位。
Flex布局做双轴组合图，比传统布局（如float、定位）好在哪里？
Flex布局的核心优势是结构清晰、对齐高效、响应式适配成本低。传统float布局易因轴标签长度变化导致对齐错位，定位布局需手动计算大量top/left值，改起来繁琐；而Flex通过align-items（垂直对齐）、justify-content（空间分配）等属性，能自动让轴与绘图区高度一致、类目项均匀分布，不用再为对齐和响应式反复调试。
左右轴的刻度怎么和绘图区的元素（如柱子、折线）精准对齐？
关键是Flex容器的结构设计：中间绘图区容器chart-body用display: flex+align-items: stretch，让左侧轴、绘图区、右侧轴高度完全一致；底部类目轴chart-footer用justify-content: space-around均匀分布类目项，再用JS获取每个类目项的offsetLeft（距离左侧的位置），对应设置柱子的left值，就能保证元素与类目精准对齐。
响应式时轴标签挤在一起，有什么解决办法？
可通过媒体查询+Flex属性调整：①用@media查询缩小轴标签字体（如屏幕<768px时，轴字体从12px改成10px）；②给轴容器加flex-shrink: 0，避免响应式时轴宽被过度压缩；③适当减小轴的固定宽度（如从60px改成40px），给标签留出空间。
折线图用SVG还是Canvas更好？
优先选SVG。SVG的viewBox属性能保持图形比例，响应式时只需设置width: 100%; height: 100%，折线不会变形；而Canvas需要手动重新计算坐标，响应式适配更麻烦。文章中的示例也用了SVG，亲测更省心。
如何根据数据动态生成柱子高度和折线路径？
用JS遍历数据即可：①柱子高度：先取数据最大值，将绘图区高度设为100%，柱子高度=（当前数据/最大值）×绘图区高度（如数据最大值是100，当前数据是70，柱子高度就是70%）；②折线路径：用M（起点）和L（连线）指令拼接坐标，比如类目项的offsetLeft对应X轴位置，数据比例对应Y轴位置，最终生成d=”M10 70 L35 50…”这样的路径。
