如何使用CSS在正方形盒子内放置4个2行2列排列的彩色圆形？

原代码存在的问题 #

• 语法错误：存在没有对应开标签的冗余</div>闭合标签，也没有用来包裹所有圆形的外层正方形容器
• 尺寸设置不合理：单个圆形宽高设为150px时，两个圆形并排的总宽度就达到300px，没有留间距和内边距的空间，无法实现2行2列的排布
• 布局逻辑缺失：仅靠inline-block属性无法精准控制换行和间距，很容易出现错位
• 所有圆形共用统一样式，无法单独配置不同配色

修改后可直接运行的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 外层正方形容器 */
.circle-container {
  width: 300px;
  height: 300px;
  background: #f5f5f5;
  padding: 20px;
  /* 内边距算入容器总宽高，不会撑大盒子 */
  box-sizing: border-box;
  /* 用弹性布局自动换行实现2列排布 */
  display: flex;
  flex-wrap: wrap;
  /* 行列间距自动分配，保证两个圆一行均匀分布 */
  justify-content: space-between;
  align-content: space-between;
}
/* 圆形通用样式 */
.circle-item {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
/* 四个圆形分别设置不同配色 */
.circle-item:nth-child(1) {
  background: #ff5252;
}
.circle-item:nth-child(2) {
  background: #448aff;
}
.circle-item:nth-child(3) {
  background: #69f0ae;
}
.circle-item:nth-child(4) {
  background: #ffd740;
}
</style>
</head>
<body>
  <div class="circle-container">
    <span class="circle-item"></span>
    <span class="circle-item"></span>
    <span class="circle-item"></span>
    <span class="circle-item"></span>
  </div>
</body>
</html>

关键修改说明 #

• 新增外层正方形容器，固定300px宽高，通过弹性布局的换行属性，实现子元素满2个自动换到下一行，配合间距属性让四个圆均匀分布在容器内，不会溢出
• 调整单个圆形尺寸为120px，配合容器20px的内边距，横向、纵向刚好放下2个圆形，中间自动留出20px的均匀间距，不会出现圆形贴边或者挤在一起的问题
• 用伪类选择器给四个圆形分别配置不同的主题色，不需要额外加类名，你可以根据需求替换成任意色值
• 修复了原代码的标签不匹配问题，移除了空的无效h1标签

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