如何通过Flex布局使表单最后一个子元素移至新行并靠右

要实现你需要的布局效果，只需在现有CSS基础上给.form-message添加几个样式属性即可，具体修改如下：

修改后的CSS代码 #

.form-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* 可选：给容器添加间距，优化布局美观度 */
  gap: 8px;
}

.form-row .form-label {
  width: 35%;
  /* 可选：让标签与输入框垂直居中对齐 */
  align-self: center;
}

.form-row .form-field {
  width: 65%;
}

.form-row .form-message {
  /* 占据整行宽度，强制换行到新行 */
  width: 100%;
  /* 左侧留白与标签宽度一致，对齐到输入框下方 */
  margin-left: 35%;
  /* 设置文本靠右对齐 */
  text-align: right;
  /* 可选：调整提示文本样式，增强区分度 */
  font-size: 0.9em;
  color: #666;
}

完整HTML代码（无需修改） #

<div class="form-row">
  <label class="form-label">Your message</label>
  <div class="form-field">
    <textarea name="message"></textarea>
  </div>
  <div class="form-message">
    <p>You can write your message here</p>
  </div>
</div>

关键样式说明 #

• width: 100%：让.form-message占据父容器整行宽度，触发flex-wrap的换行机制，单独显示在新行；
• margin-left: 35%：与.form-label的宽度保持一致，确保提示文本精准对齐到.form-field的正下方；
• text-align: right：直接实现提示文本靠右对齐的需求；
• 额外添加的align-self: center和gap是优化体验的可选样式，可根据实际需求调整或移除。

内容的提问来源于stack exchange，提问作者New developer