Question

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

在第一个中，将显示所有inputs和内容。在第二个中，我想显示提交button。

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

这是我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

如何强制button到下一行？

提前致谢！

Answer 1

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

＆＃13;

#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 */
}

＆＃13;

<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>

＆＃13;

Answer 2

的变化：

已移出#customForm

制作#wrapperName

#wrapperName {
 flex: 1;
 display: flex;
 flex-flow: column wrap;
 align-items: space-around;
 justify-content: center;
}

删除了#content个样式。
添加了属性form="customForm"，使其在表单外部属于表单。

蓝色虚线轮廓和边框和颜色的视觉变化仅用于视觉辅助，不是必需的。

html, body{
   width: 100%;
   margin: 0;
}

#content{

}
#divInside{
   position: relative;
   width: 200px;
   height: 155px;
   text-align: center;
   border: 1px solid red;
   background: rgba(255,0,0,.4);
   color: white;
   margin: 10px;
}

#customForm{
   display: flex;
   justify-content: center;
   outline: 1px dashed blue;
  
}

#wrapperName{
   flex: 1;
  display: flex;
  flex-flow: column wrap;
  align-items: space-around;
  justify-content: center;
}

<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>
    
  </form>
  <input id="buttonLogin" type="submit" value="Submit" form="customForm">
</div>

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

2 个答案: