如何用Flexbox使Header内的两个子容器实现一致垂直对齐？

我正在完成Odin Project的landing page任务，制作Header时遇到布局问题：目标是让Header容器内的两个子容器（header-container与title-container）的内容外边缘垂直对齐。目前header-container用justify-content: space-around实现了预期效果，但title-container用相同属性却达不到目标，请问如何用Flexbox让两者实现一致的垂直对齐？

我的原始代码 #

CSS代码

* {
    font-family:'Times New Roman', Times, serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}

.header {
    background: #1F2937;
    color: white;
    display: flex;
    margin: 0;
    padding: 8px 0px 64px;
    flex-direction: column;
}

.header-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 64px;
    border: solid black;
}

.title-container {
    display: flex;
    justify-content: space-around;
    border: solid black;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Landing Page Title</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div class="header">
            <div class="header-container">
                <div class="logo">Header Logo</div>
                <div class="link-container">
                    <div class="link1">Link 1</div>
                    <div class="link2">Link 2</div>
                    <div class="link3">Link 3</div> 
                </div>
            </div>
            <div class="title-container">
                <div class="title">Website Title, This Site is Awesome!
                    <div class="title-info">This is where I would put my info... If I had some!</div>
                    <button class="button1">Sign Up</button>
                </div>
                <div class="image1-container">
                    <div class="image1">This is a placeholder for an image...</div>
                </div>
            </div>
        </div>
    </body>
</html>

解决方法 #

问题根源

justify-content: space-around会在容器左右两端和子元素之间分配均等空白，但两个容器的子元素总宽度不同，导致内容的外边缘无法对齐。

修改方案

给两个容器设置相同的水平内边距，并将justify-content改为space-between，让子元素分别对齐容器的左右边缘，以此保证内容外边缘垂直对齐。

修改后的CSS代码

* {
    font-family:'Times New Roman', Times, serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}

.header {
    background: #1F2937;
    color: white;
    display: flex;
    margin: 0;
    padding: 8px 0px 64px;
    flex-direction: column;
}

.header-container {
    display: flex;
    /* 改为space-between，让子元素贴紧容器两端 */
    justify-content: space-between;
    /* 添加相同的水平内边距，控制内容与页面边缘的距离 */
    padding: 0 10%;
    margin-bottom: 64px;
    border: solid black;
}

.title-container {
    display: flex;
    /* 同样改为space-between */
    justify-content: space-between;
    /* 与header-container保持一致的水平内边距 */
    padding: 0 10%;
    border: solid black;
}

额外优化（可选）

如果需要让title-container的子元素垂直居中，可以给它加上align-items: center：

.title-container {
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    border: solid black;
    /* 垂直居中子元素 */
    align-items: center;
}

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