为何设置display:flex的header父元素无法让子元素横向对齐？

核心问题很直接：你CSS里写的是类选择器 .header，但HTML里的父元素是原生<header>标签，没加class="header"，导致flex样式完全没作用到目标元素上，自然不会横向排列。

两种修复方式 #

方式一：修改CSS选择器 #

把CSS中的.header改成标签选择器header，直接匹配HTML里的<header>元素：

header {
  display: flex;
}

方式二：给HTML元素加类名 #

在HTML的<header>标签上补充class="header"，让CSS的类选择器能命中它：

<header class="header">
  <div class="header-left">...</div>
  <div class="header-right">...</div>
</header>

额外优化提示 #

• 可以给header-left和header-right设置flex: 1让它们均分宽度，或者根据需求设置固定宽度，避免内容布局混乱
• 全局*选择器设置的padding:5px可能会干扰整体布局，建议用更精准的选择器控制内边距，或者给所有元素加上box-sizing: border-box来避免尺寸偏移

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