<分区>
我有这个代码。我给了我的 body 一个 display:flex。现在，难道所有的子元素都不应该变成 flex 元素，在 body 里面，而 body 是 1. 一个 flex 容器和 2. 所有子元素的包装器吗？
所以我尝试查看 Firefox 中的开发人员工具:align-items/justify-content 对此元素没有影响，因为它既不是 flex 容器也不是网格容器。
请给我解释一下什么时候需要给每个div、section、main、一个display:flex是自己的，什么时候是自动继承的。
这是我的代码:
#html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Butterfly Music App</title>
</head>
<body>
<main>
</main>
<footer>
</footer>
</body>
</html>
#css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: cyan;
font-family: gabriola;
color: purple;
}
footer {
justify-content: flex-end;
align-items: flex-start;
flex: 0 0 120px;
background-color: pink;
}