html - 如何将标签与包装标签对齐？

Question

我有一个标签和多个可以换行的标签:

.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: blue;
}

<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</div>

看起来像这样:

我想实现以下目标:

1. 标签和标签的第一行应该有相同的中间线。
2. 去除最后一行标签下方的多余空间，但保留第一行和第二行标签之间的空间。

这是期望的结果:

我怎样才能做到这一点？

Answer 1

我已将最后一个和倒数第二个 child 的 margin-bottom 设置为 0px 并将 vertical-align: middle 设置为 .label 行高等于 .box 的高度。

.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
  line-height:40px;
  vertical-align:middle;
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: blue;
}

.box:last-child,.box:nth-last-child(2) {
  margin-bottom: 0px;
}

<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</div>