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