CSS flexbox布局配置后完全不生效的问题排查

Flex布局不生效是多个语法、结构错误共同导致的，逐个修复即可：

• CSS语法错误：.flex-container内的display: flex、flex-direction: column、background-color: DodgerBlue三个属性结尾全部没写分号，CSS规则中除了代码块最后一个属性，其余属性必须用分号分隔，否则浏览器会直接忽略整段规则，这是flex属性完全没反应的核心原因
• HTML结构错误：
  • 标签闭合混乱：<h1>错误用</h2>闭合；<div class="flex-container">在</body>前已经闭合，</footer>后多了一个无匹配的</div>；<footer>被放到了</body>标签外部，不符合HTML解析规则
  • class属性值未加引号：<div class=flex-container>的属性值需要包裹在双引号内
• 选择器匹配错误：你写的.flex-container > div只会选中flex容器的直接子级div，但代码里的div全部嵌套在fieldset标签内部，根本匹配不到该规则，所以设置的宽、居中、行高样式全部不会生效
• 布局属性缺失：仅设置flex-direction: column只能改变主轴方向，要实现页面居中排列的效果，还需要补充align-items: center（交叉轴居中）、justify-content: center（主轴居中），同时给容器设置高度占满视口

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="flex-container">
    <h3>WHAT TO STUDY</h3>
    <h1>What are your interests?</h1>
    <fieldset>
      <legend>Pick one from this list</legend>
      <div>
        <input type="radio" id="data" name="list-1" value="data" checked>
        <label for="data">data</label>
      </div>
      <div>
        <input type="radio" id="math" name="list-1" value="math">
        <label for="math">mathy</label>
      </div>
      <div>
        <input type="radio" id="theory" name="list-1" value="theory">
        <label for="theory">theory</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>And one from this list</legend>
      <div>
        <input type="radio" id="people" name="list-2" value="people" checked>
        <label for="people">people</label>
      </div>
      <div>
        <input type="radio" id="problem solving" name="list-2" value="problem solving">
        <label for="problem solving">problem-solving</label>
      </div>
      <div>
        <input type="radio" id="art" name="list-2" value="art">
        <label for="art">art</label>
      </div>
    </fieldset>
    <footer>
      <p>Please select one choice in each list</p>
    </footer>
    <script src="script.js"></script>
  </div>
</body>
</html>

CSS部分 #

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.flex-container {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.flex-container fieldset {
  width: 320px;
}

.flex-container fieldset > div {
  margin: 8px 0;
}

修复后页面元素纵向排列、整体居中，和预期效果一致：

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