为何我的container在Live Server中不显示？flexbox示例问题求助

常见问题排查与修复步骤 #

• 确认CSS选择器与HTML匹配：检查CSS中是否用对了类/ID选择器，比如CSS写的是.container（类选择器），HTML里必须对应<div class="container">；如果是#container（ID选择器），HTML要写<div id="container">，不匹配会导致样式完全不生效。
• 确保开启Flex布局：CSS的container必须添加display: flex;，这是flex布局的核心属性，没有它container就是普通块级元素，不会有flex布局效果。
• 给container设置可见性样式：如果container没有背景色、宽高，即使存在也可能看不到。可以添加background-color: #f0f0f0;、min-height: 200px;这类属性，方便观察容器范围。
• 修正HTML结构层级：示例盒子必须是container的子元素，正确结构应该是container包裹所有盒子，而不是和盒子平级。比如：

<!-- 正确结构 -->
<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
</div>

<!-- 错误结构（会导致container和盒子上下排列） -->
<div class="container"></div>
<div class="box">盒子1</div>
<div class="box">盒子2</div>

• 检查样式覆盖问题：打开浏览器开发者工具（F12），选中container元素，查看Styles面板，确认flex相关属性有没有被划掉（被其他高优先级样式覆盖），如果有，调整选择器优先级或修改冲突样式。

完整示例代码 #

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox课堂示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box">示例盒子1</div>
    <div class="box">示例盒子2</div>
    <div class="box">示例盒子3</div>
  </div>
</body>
</html>

CSS

.container {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: #eee;
  justify-content: space-around;
  min-height: 180px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

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