使用Flex布局网站菜单时SVG右对齐问题求助

我看了你的代码，问题其实出在Flex容器的主轴方向和对齐属性的搭配上！

你给.link和.blank设置了flex-flow: column nowrap，这意味着Flex容器的主轴是垂直方向（column），这时候justify-content控制的是垂直方向的对齐，而你要实现的SVG水平右对齐，应该用控制交叉轴的align-items属性才对。

现在你的.link里用了justify-content: flex-end，在column主轴下，它只会把SVG往容器底部靠，而不是右边——这就是SVG没法右对齐的核心原因。

修复步骤： #

1. 修改.link和.blank的对齐属性，把justify-content: flex-end换成align-items: flex-end，这样就能让水平方向的元素（SVG）靠右对齐。
2. 给.svgLink.left加上width: 100%，确保SVG能充分利用容器宽度，避免出现意外的间距。

修改后的CSS代码：

.seventh { 
  display: flex; 
  width: 100%; 
  height: calc(100% / 7); 
  overflow: hidden; 
  margin: auto; 
} 
div.link, div.blank { 
  display: flex; 
  /* 替换属性，控制水平方向对齐 */
  align-items: flex-end; 
  width: 46.25%; 
  height: 100%; 
  position: relative; 
  flex-flow: column nowrap; 
  overflow: hidden; 
  margin-right: 0; 
} 
.svgLink.left { 
  display: block; 
  margin-right: 0; 
  height: 100%; 
  /* 新增宽度设置，确保SVG占满容器宽度 */
  width: 100%; 
}

为什么社交图标里的SVG能正常对齐？ #

大概率是你社交图标所在的Flex容器用了默认的flex-flow: row nowrap（主轴水平），这时候justify-content: flex-end才会生效，让元素靠右对齐。和你当前菜单的Flex主轴方向完全不同，所以效果天差地别。

修改后，你的SVG就会像目标图里那样，紧贴容器右侧对齐啦！

内容的提问来源于stack exchange，提问作者PrismaPixel Studios