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

Question

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

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

Answer 1

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

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

顺便说一句，我强烈建议在 Angular 中使用fxLayout库。

<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%;
}