Flexbox设置justify-content等属性无效，无法消除子元素间距问题

问题根源 #

你为.entry-content a设置的margin-left: auto; margin-right: auto是导致子元素间距异常、flex对齐属性失效的核心原因：auto值的左右外边距会让每个链接元素自动均分父容器的剩余空间，直接覆盖了外层flex容器设置的对齐规则，强制在元素之间填充空白。

解决方案 #

按以下步骤修改CSS即可实现预期效果：

• 删除.entry-content a选择器下的margin-left:auto; margin-right:auto两行属性
• 调整外层flex容器的配置，补充对齐和间距控制属性：

.entry-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 每行子元素整体居中 */
  gap: 0; /* 强制子元素横竖方向均无间距，后续需要间距可直接修改该值 */
  align-items: center; /* 同行子元素垂直居中对齐 */
}

• 排查古腾堡默认样式干扰：如果仍存在多余垂直间距，可添加规则.entry-content > * { margin: 0 !important; }强制重置所有直接子元素的默认外边距
• 处理异常行高：如果底部小尺寸元素仍有垂直空白，可给.entry-content添加line-height: 0，再单独给内部文本元素设置line-height即可清除行高带来的额外间距

排查时可通过浏览器F12开发者工具的元素检查器查看元素盒模型，可直接定位所有间距的来源。

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