如何修复弹性容器中的对齐方式？

Question

我有一个表格。标签和输入应始终居中对齐。为此，我使用

display: flex;
align-items: center;

在容器元素上。但是，当错误文本出现在输入下方时，标签会被向下推。考虑到 flex 行为，它是绝对正确的，但是有没有办法修复标签和输入之间的对齐方式，以便它们始终居中对齐，而不管输入下方可能存在的 div？

Here is the demo

此外，请注意这里必须使用 flex 容器。

align-items:baseline;

也不是一个选项，因为可以用文本区域代替输入。

Answer 1

不适用于您当前的标记。

实现此目的的一种方法是在出现错误消息时向父级添加 class。使用此 class 和包装器 div 围绕您的输入和错误消息，您绝对可以将错误定位在输入下方并将相关边距添加到容器底部。

这样错误消息就会脱离流程，因此对齐方式就会如您所愿。

.form-group.validation-error {
  margin-bottom: 30px;
}

.input-wrap {
  position: relative;
}

.error-message {
  position: absolute;
  top: 40px;
}

Demo