如果元素应用了display: flex样式，则<br>标记不会在元素后换行，就像您的代码中的情况一样。这是因为Flex容器默认情况下不允许在其内容中换行。
若要修正此问题，您可以将.recordbuttons类别的display属性变更为inline-flex，这将允许<br>标记在项目之后中断。以下是范例：

.recordbuttons {
    display: inline-flex;
    color: gray;
}

或者，您可以从.recordbuttons类别中移除display: flex样式，并使用<br>标签在按钮之间（而非按钮之后）中断。

<form name="properties" id="properties">
        <div class="recordbuttonsdiv recordbuttons">
          <button type="button" class="recordbuttons save">Save</button>
          <button type="button" class="recordbuttons cancel">Cancel</button><br>
          <button type="button"class="recordbuttons firstrecord">First Record</button><br>
        <button type="button" class="recordbuttons nextrecord">Next Record</button><br>
        <button type="button" class="recordbuttons previousrecord">Previous Record</button><br>
        <button type="button" class="recordbuttons lastrecord">Last Record</button>
      </div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
</form>

这将产生与以前相同的布局，但<br>标记将在按钮之间而不是在按钮之后断开。