如何使用flexbox创建自定义窗体？

我正在尝试使用flexbox创建一个form，它将包含两行代码。如何使用flexbox创建自定义窗体？

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

+----------------+--------------------------+ 
| 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（ #divInside）有一个固定的width，我不知道如何使其他div（#wrapperName）填充行的其余部分，并强制button移动到下一个线。

如何强制button到下一行？

在此先感谢！

来源

2016-05-17 Francisco Romero

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

来源

2016-05-17 23:06:29

位置属性是与'absolute'定位对准内容DIV中的一些元素（这里我减少代码量）。谢谢你的回答！这与我所寻找的相似，但不完全相同。无论如何，随着你的解决方案，你让我清楚我的想法，并得到它:) –

不客气。您可以通过启用容器上的“包装”并使项目太宽以适合当前行来强制Flex项目到下一行。 –

是的，我以前用过它，但我忘了它。再次感谢您拯救我的生命:) –

变化：

感动提交按钮出#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>

来源

2016-05-17 23:08:55 zer00ne

如何使用flexbox创建自定义窗体？

回答

相关问题