html - 如何使用 flexbox 创建自定义表单？

Question

我正在尝试使用 flexbox 创建一个包含两行的 form。

在第一个中，将显示所有输入 和内容。在第二个中，我想显示提交 按钮。

+----------------+--------------------------+
|    CONTENT     |          INPUTS          |
+----------------+--------------------------+
|              SUBMIT BUTTON                |
+-------------------------------------------+

这是我的代码:

html, body{
   width: 100%;
   margin: 0;
}

#content{
   display: flex;
}
#divInside{
   position: relative;
   width: 200px;
   height: 155px;
   text-align: center;
   background-color: red;
   color: white;
   margin: 10px;
}

#customForm{
   display: flex;
   justify-content: center;
   align-items: center;
}

#wrapperName{
   flex: 1;
}

<div id="content">
  <form id="customForm" action="whatever" method="post">
    <div id="divInside"></div>
    <div id="wrapperName">
      <input class="textForm" type="text" name="name" placeholder="Name"><br>
      <input class="textForm" type="text" name="description" placeholder="Description"><br>
    </div>
    <input id="buttonLogin" type="submit" value="Submit">
  </form>
</div>

我尝试将内容包装在一个 div 中，将 inputs 包装在另一个 div 中以填充整行，但是，由于第一个 div (#divInside) 具有固定的 width，我不知道如何让另一个 div (#wrapperName) 填充该行的其余部分并强制 button 移动到下一个行。

如何强制按钮到下一行？

提前致谢!

Answer 1

布局相对简单，仅靠 flex 属性。不需要 CSS 定位属性。

#customForm {
    display: flex;              /* primary flex container */
    flex-wrap: wrap;            /* enable flex items to wrap */
}
#divInside {
    width: 200px;
    height: 155px;
    background-color: red;
    color: white;
    margin-right: 10px;
    display: flex;               /* nested flex container (for text alignment demo) */
    justify-content: center;     /* center text (optional) */
    align-items: center;         /* center text (optional) */
}
#wrapperName {
    flex: 1;                     /* consume all available space in the line */
    display: flex;             
    flex-direction: column;      /* stack flex items vertically */
    justify-content: center;     /* vertical alignment */
}
#buttonLogin {
    flex-basis: 100%;            /* force button to its own line; take full width */
}

<form id="customForm" action="whatever" method="post">
  <div id="divInside">Content</div>
  <div id="wrapperName">
    <input class="textForm" type="text" name="name" placeholder="Name">
    <input class="textForm" type="text" name="description" placeholder="Description">
  </div>
  <input id="buttonLogin" type="submit" value="Submit">
</form>