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

Posted 2023-03-05

【中文标题】使用 html/css/flexbox 设置错误消息样式

【英文标题】：Styling error messages with html/css/flexbox

【发布时间】：2021-09-30 15:28:44

【问题描述】：

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

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

【参考方案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%;