Flexbox布局中第二个Div未应用CSS指定样式问题排查

你代码里的第二个Div标签存在拼写错误——把class写成了clsss，导致CSS中的.div1选择器无法匹配到该元素，所以样式没生效。手动调试时你正确指定了类名，因此样式能正常显示。

修正后的HTML代码：

<div class="contains">
  <div class="div1">1</div>
  <div class="div1">2</div>
</div>

完整可运行代码示例：

.contains {
  height: 100vh; /* 改为100vh确保容器占满视口高度，避免因父元素无高度导致居中效果不可见 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 可选：给两个Div添加间距，方便区分 */
}

.div1 {
  height: 50px;
  width: 50px;
  background-color: red;
}

<div class="contains">
  <div class="div1">1</div>
  <div class="div1">2</div>
</div>

修正后两个Div都会应用50px宽高和红色背景，并且通过Flexbox在容器中居中显示。

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