Html 对齐flexbox内项目的基线

我基本上是想让值的基线与底层单元的基线对齐，而不是像下面代码中那样的第一个基线

如果我完全抛弃flexbox，我可以让它工作，但我需要它的响应能力

规范的建议似乎是将flex项包装在内联块中，但正如您从代码笔中看到的，它似乎不适合我

这是我一直在尝试的代码笔：

.价值单位{ 显示器：flex； flex-flow：行nowrap； 调整内容：灵活启动； 调整项目：基线； } .价值{ 线高：1； 字体大小：120px； 右边距：10px； } .unit_集装箱{ 显示器：flex； 柔性流动：柱状nowrap； 证明内容：柔性端； 对齐项目：居中； } .分隔器{ 宽度：100%； } .内联块{ 显示：内联块； } 340 M s

---

尝试将“对齐项目”值设置为“结束”。是这样的

align-items: end;

请尝试以下操作：

.value_and_unit {
    display: flex;
    /* flex-flow: row nowrap; */
    /* justify-content: flex-start; */
    /* align-items: baseline; */
}

.value {
    font-size: 120px;
    margin-right: 10px;
    line-height: 1;
}

告诉我这是否是理想的效果，如果不是，告诉我问题出在哪里，这样我就有了一个线索。祝你好运

编辑：将标记替换为，因为默认情况下浏览器会向其添加线条高度、边距和其他属性！通过自己添加粗体，根据需要设置项目样式。请记住，h1是一个具有高权重的语义标记，不应在不需要时使用

EDIT2：我忘了提到我在真实环境中使用代码，而不是在代码笔中，如果我正确理解了您的问题，一切看起来都很好。如果代码笔有问题，您也可以在real server中尝试使用它。

如果.value元素只包含数字，那么您可能只需简单地调整行高即可。将其缩小一点，以便行框缩小以适应字体高度

.价值单位{ 显示器：flex； 边框：1px纯红；/*demo*/ } .价值{ 线条高度：.75；/*键调整*/ 字体大小：120px； 右边距：10px； } .unit_集装箱{ 显示器：flex； 柔性流动：柱状nowrap； 证明内容：柔性端； 对齐项目：居中； } .分隔器{ 宽度：100%； } 340 M s

---

我想你指的是弹性端。是的，我试过了，但没用。我需要它们在基线处对齐。不，就像这样对齐项目：结束；请确保您使用css前缀，使其在所有浏览器上正常工作。您应该尝试。内联块{display:inline block；align self:flex end；}您尝试过吗？我将其更改为span。当单位超过值的基线时，这不是期望的效果。我需要s的基线与值的基线对齐。这是我得到的结果：它们对我来说似乎非常对齐。如果我仍然没有得到它，请用油漆或类似的东西画出想要的效果，因为否则，我似乎误解了一些东西。这基本上就是我想要达到的：