使用 html/css/flexbox 设置错误消息样式

Question

我想为密码字段实现错误消息，如下图所示。

谁能告诉我用 HTML/CSS 和 flexbox 实现以下视图的最佳/干净方式是什么？

Answer 1

我知道我应该说“展示你的尝试”，但我很想看看其他人会如何解决这个问题。

我在下面给出的解决方案是基本的（如果它们溢出，它不会处理长字符串值；它可能会更好，并使用媒体查询将.row 更新为column小视口）。

顺便说一句，我强烈建议将 fxLayout 库与 Angular 一起使用。

<div>
  <div class="row">
    <div class="cell">content 01</div>
    <div class="cell">content 02</div>
  </div>
  <div class="row">
    <div class="cell">content 03</div>
    <div class="cell">content 04</div>
  </div>
</div>
  

div.row {
  display: flex;
  flex-direction: row;
}

div.cell {
  display: flex;
  width: 50%;
}