Html 将display:flex应用于表单

我试图在这个表单上应用display:flex，但失败了。HTML的结构是不能改变的，我一辈子也不知道该怎么做。 它们全部内联（包括按钮）的唯一方法是在表单和表单字段上应用flex。但是当表单换行时，按钮停留在第一行，而姓氏的输入字段进入第二行

我做错了什么？我可以只使用CSS而不使用HTML做什么？谢谢大家!

form、.form字段{
显示器：flex；
}

联系我们

添加

flex wrap

将按钮发送到下一行的末尾：

form, .form-fields {
  display: flex;
  flex-wrap: wrap;
}

---

我想这可能是你想要做的。我所做的就是添加：

flex-direction:column

flexbox的默认值为行。这将使弹性项成为一行，并将子项分散在该行上

将flexbox的值设置为列，将使flex项成为列，并将子项分散到该列上

希望有帮助；）


form、.form字段{
显示器：flex；
弯曲方向：立柱；
}









联系我们
你想让元素永远不换行吗？@Michael\u B因此，如果我将flex应用于表单，它的子元素是.form body和.form footer。这些都具有flex属性，对吗？我也需要分别对它们应用flex？并控制它们对包装的反应。我做对了吗？哈哈，你到底想达到什么目的？为什么要使用flexbox？@RMo我正在尝试内联此表单，并使其在包装时按照您的预期包装：首先是所有输入字段，然后是最后的按钮。对不起，如果我的解释是一团糟。关于flexbox，我不确定。我觉得这样最好？