如何使用inline-block实现多个div横向排列并自动换行？

现有代码如下：

CSS 代码 #

.block {
  margin: 10px;
  padding: 10px;
  border: 2px solid #a2a2a6;
}

.color {
  text-align: center;
}

.blue {
  padding: 50px 0;
  background-color: blue;
  width: 200px;
  text-align: cetner;
}

.red {
  padding: 50px 0;
  background-color: red;
  width: 200px;
  text-align: cetner;
}

.green {
  padding: 50px 0;
  background-color: green;
  width: 200px;
  text-align: cetner;
}

.yellow {
  padding: 50px 0;
  background-color: yellow;
  width: 200px;
  text-align: cetner;
}

HTML 代码 #

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>My website style guide</h1>
  <div class="block">
    <h2>Colors</h2>
    <div class="color">
      <p class="blue">Blue</p>
    </div>
    <div class="color">
      <p class="red">Red</p>
    </div>
    <div class="color">
      <p class="green">Green</p>
    </div>
    <div class="color">
      <p class=yellow>Yellow</p>
    </div>
</body>

</html>

当前四个彩色块为纵向排列，需求是让它们显示在同一行，且未来新增彩色块时能自动换行。尝试给.color添加display: inline-block未生效，需要不修改原有类名的解决方案。

方案1：使用 Flexbox（推荐） #

给.block添加 Flexbox 布局，利用flex-wrap: wrap实现自动换行：

.block {
  margin: 10px;
  padding: 10px;
  border: 2px solid #a2a2a6;
  /* 新增以下两行 */
  display: flex;
  flex-wrap: wrap;
  /* 可选：给子元素之间添加间距 */
  gap: 10px;
}

/* 调整h2占满整行，避免和彩色块并排 */
.block h2 {
  width: 100%;
  margin-top: 0;
}

.color {
  text-align: center;
}

Flexbox 是现代布局方案，兼容性好，自动处理换行和对齐，新增元素时无需额外修改样式。

方案2：修复 inline-block 用法 #

之前给.color加display: inline-block未生效，可能是因为块级元素的默认排版或垂直对齐问题，调整如下：

.color {
  text-align: center;
  /* 保留inline-block，新增垂直对齐和间距处理 */
  display: inline-block;
  vertical-align: top;
  /* 可选：添加元素间距 */
  margin: 0 10px 10px 0;
}

/* 让h2占满整行 */
.block h2 {
  width: 100%;
}

注意：inline-block 元素之间会存在 HTML 空白导致的间距，若需要消除，可通过设置父元素font-size: 0再给子元素恢复字号，或者去掉 HTML 中.color标签之间的换行。

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