如何让分属不同Flex容器的Flex盒子横向对齐在同一行？

你的核心问题是没给父容器开启flex布局——flex相关的布局属性（比如flex-direction、align-items）只有在父元素设置了display: flex之后才会生效。你之前错误地给子元素加了display: flex，完全搞反了flex的使用逻辑。

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
}

/* 给父容器开启flex布局，这是关键 */
.headercontainer {
    background-color: #EDEDEE;
    display: flex; /* 必须添加这行 */
    flex-direction: row; /* 默认就是row，可省略 */
    align-items: center; /* 让子元素垂直居中对齐 */
    /* 可选：如果需要子元素间留间距，可添加下面属性 */
    /* justify-content: space-between; */
}

.headerlogotext {
    font-size: 24px;
    font-weight: bolder;
    color: #ff9248;
    font-family: Arial, Helvetica, sans-serif;
    /* 移除这里的display:flex和flex-direction，完全没必要 */
}

.link {
    font-size: 18px;
    font-weight: lighter;
    color: #ffb38a;
    font-family: Arial, Helvetica, sans-serif;
    /* 同样去掉不必要的flex属性 */
}

关键说明 #

• display: flex是开启flex布局的核心开关，必须加在父容器上，用来控制它的直接子元素（img和h1）的排列方式
• flex-direction: row是flex布局的默认值，所以可以不用特意声明
• align-items: center让子元素在垂直方向上居中，符合常见的导航栏样式
• 子元素（img、h1）不需要设置display: flex，除非它们自身还有子元素需要用flex布局排列

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