Html 如何将标签与包装标签对齐？

我有一个标签和多个标签，可以包装成多行：

.container{
背景色：#ddd；
显示器：flex；
宽度：200px；
边缘底部：50px；
}
.标签{
右边距：10px；
}
.box集装箱{
显示器：flex；
柔性包装：包装；
}
.盒子{
显示：内联块；
高度：40px；
宽度：60px；
边缘底部：10px；
右边距：10px；
背景颜色：蓝色；
}

标签：
标签：

我已将最后一个和倒数第二个孩子的

页边距底部设置为
0px
，并将
垂直对齐：中间
设置为
。标签
，线条高度等于
框的高度


.container{
背景色：#ddd；
显示器：flex；
宽度：200px；
边缘底部：50px；
}
.标签{
右边距：10px；
线高：40px；
垂直对齐：中间对齐；
}
.box集装箱{
显示器：flex；
柔性包装：包装；
}
.盒子{
显示：内联块；
高度：40px；
宽度：60px；
边缘底部：10px；
右边距：10px；
背景颜色：蓝色；
}
.box:最后一个孩子，.box:第n个最后一个孩子（2）{
边缘底部：0px；
}

标签：
标签：
请试试这个。我添加了css，即

.boxes-container .box:nth-last-of-type(-n+2) {
   margin-bottom: 0;
}
.label {  
   margin-top: 8px;
}


.container{
背景色：#ddd；
显示器：flex；
宽度：200px；
边缘底部：50px；
}
.标签{
右边距：10px；
边缘顶部：8px；
}
.box集装箱{
显示器：flex；
柔性包装：包装；
}
.盒子{
显示：内联块；
高度：40px；
宽度：60px；
边缘底部：10px；
右边距：10px；
背景颜色：蓝色；
}
.box容器.box:类型的最后第n个（-n+2）{
页边距底部：0；
}

标签：
标签：
正如其他人所指出的，有多种方法可以解决这个问题。下面是另一个使用
flex
对齐标签的方法：

.label {
  height: 40px;
  display: flex;
  align-items: center;
}

假设盒子的高度是固定的，我们可以将
.label
设置为相同的高度，并使用flex将其内容居中。同样有效的单行解决方案是指定
行高：40px
，假设标签内容不会换行到多行

在My中可以看到我的原始解决方案，即删除每个
.box容器
最后两个元素后面的空白，但使用了一个相当优雅的表达式来覆盖最后一个和第二个
.box
元素：

.box:nth-last-of-type(-n+2)

一个简单的解决方案是使用边距（请注意，如果包装发生变化，第n个子解决方案将不起作用）：

将
margin:5px
添加到
框中
以替换10px的右侧和底部边距

现在，对于容器
box容器
您可以给出负的
margin:-5px
以将
box
es拉到边缘

这将对所有内容进行排序，但
标签的对齐方式除外。在当前标记中，没有通用的修复程序可以动态地处理所有的
box
大小和
box容器
宽度-因此您可以提供一些
边距顶部来对齐它

请参见下面的演示：


.container{
背景色：#ddd；
显示器：flex；
宽度：200px；
边缘底部：50px；
}
.标签{
右边距：10px；
页边距顶部：10px；/*调整此值*/
}
.box集装箱{
显示器：flex；
柔性包装：包装；
保证金：-5px；/*新*/
}
.盒子{
显示：内联块；
高度：40px；
宽度：60px；
/*边缘底部：10px；
右边距：10px*/
保证金：5px；/*新*/
背景颜色：蓝色；
}

标签：
标签：
回答得不错。如果你在答案中添加了一些解释，这通常对读者很有帮助。是的，当然，下次我会小心的，顺便说一下，我添加了最后一个和第二个孩子的边距：0和标签“垂直对齐中间线高度”，我已经将解释从你的评论复制到了答案中。