我有一个包含标题和主要内容的包装器。包装器设置为显示flex，当我对齐标题中包含的项目时，除非我将标题标签设置为也显示flex，否则它不会对齐。
我很困惑为什么我必须在wrapper和header标签上设置显示flex才能工作？我认为在这种情况下是header的子容器应该从父容器继承显示flex。
/* Styling used for index pages including registration form and reset password pages. */
* {
text-decoration: none;
}
html {
font-family: 'Lato', Arial, sans-serif;
}
body,
html {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 1;
display: flex;
align-items: center;
}
main {
flex: 3;
}<body>
<div class="wrapper">
<header>
<h1>Quiz Manager</h1>
<img src="/QuizManager/images/Logo.png" alt="Logo">
</header>
<main>
<div class="form-container">
<form action="index.php" method="POST">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit" name="submit">Login</button>
</form>
</div>
</main>
</div>
</body>当你在.wrapper上声明flex时，它只影响直接元素。header的子女不继承flex财产。