CSS Flex布局下链接被容器拉伸的问题及解决方法咨询

你遇到的是Flex布局里的典型默认行为问题——当链接作为Flex容器的直接子元素时，它会自动成为flex item，而flex item默认的align-self属性值是stretch，这会让它在交叉轴方向填满整个容器的空间。哪怕你设置display: inline-block也没用，因为Flex布局的优先级高于普通的display属性，flex item的布局规则会覆盖掉inline-block的特性。

给你两个直接可行的解决方案：

方案1：单独给链接设置对齐规则 #

直接给链接添加align-self: flex-start，让它在交叉轴方向保持自身宽度，不再被拉伸：

.container {
  display: -webkit-flex;
  display: flex;
  /* 你的其他容器样式 */
}

.container a {
  align-self: flex-start; /* 关键属性，阻止拉伸 */
  font-weight: bold; /* 你已定义的加粗样式 */
  /* 你的其他链接样式，比如颜色、下划线等 */
}

方案2：给Flex容器统一控制子元素对齐 #

如果容器内的所有子元素都不需要被拉伸，可以直接给容器设置align-items: flex-start，一次性搞定所有子元素的交叉轴对齐：

.container {
  display: -webkit-flex;
  display: flex;
  align-items: flex-start; /* 全局控制子元素不拉伸 */
  /* 你的其他容器样式 */
}

.container a {
  font-weight: bold;
  /* 你的其他链接样式 */
}

内容的提问来源于stack exchange，提问作者Peter Wilkins