我想使用Flexbox创建如下图所示的表单布局。包含的示例是我正在构建的投资组合网站的模拟。使用Flexbox的CSS 2列表布局
这是我的表单代码，我尝试了很多不同的方式让它看起来像使用Flexbox的模拟，但没有成功。感谢您的帮助！
<form>
<input type="text" placeholder="Your Name*">
<textarea placeholder="Type your message here..."></textarea>
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
<input type="submit" value="SEND!">
</form>
与现有的标记，你可以使用flexbox列布局。
使孩子们占用的空间要如何主要设置是：
flex-container需要的高度，这里60vh，所以柔性项目知道在哪里以及如何打破流动
留言textarea具有100％的高度，这使得它打破流动并且获得全高
主题textarea具有flex: 1，这使得它获得可用空间左
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 60vh;
border: 1px solid black;
padding: 10px 5px;
box-sizing: border-box;
}
.flex-container * {
width: calc(50% - 10px);
margin: 0 5px;
box-sizing: border-box;
}
.flex-container :nth-child(2),
.flex-container :nth-child(3) {
margin-top: 5px;
}
.flex-container :nth-child(3) {
flex: 1;
}
.flex-container :nth-child(4) {
height: 100%;
}<form class="flex-container">
<input type="text" placeholder="Your Name*">
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
<textarea placeholder="Type your message here..." rows="7"></textarea>
</form>如果你可以改变的标记和/或不希望设置一个高度上flex-container，你可以添加一个row布局上述样品
其主要设置为：
flex-container，取出flex-direction: column所以它的方向是row
添加一个包装围绕输入的并受textarea
.flex-container {
display: flex;
border: 1px solid black;
padding: 10px 5px;
}
.flex-wrapper {
display: flex;
flex-direction: column;
}
.flex-container > * {
flex: 1;
min-height: 50vh;
margin: 0 5px;
}
.flex-wrapper :nth-child(2),
.flex-wrapper :nth-child(3) {
margin-top: 5px;
}
.flex-wrapper :nth-child(3),
.flex-container > textarea {
flex: 1;
}<form class="flex-container">
<div class="flex-wrapper">
<input type="text" placeholder="Your Name*">
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
</div>
<textarea placeholder="Type your message here..." rows="7"></textarea>
</form>谢谢，我真的很感谢你投入这个时间。 – DougLuce
如果你可以修改HTML，你可以添加包装（左/右弯曲）和CSS变成容易（我认为）
<form class="flex-container">
<div class="flex left">
<input type="text" placeholder="Your Name*"><br>
<input type="text" placeholder="Your E-Mail Address*"><br>
<textarea placeholder="Subject"></textarea>
</div>
<div class="flex right">
<textarea placeholder="Type your message here..." rows="7"></textarea>
</div>
</form>
，然后你需要这个CSS也容纳了非常小的屏幕小于400像素（响应式设计）...调节媒体查询自己的喜好
.flex {
padding: 10px;
}
.flex input,
.flex textarea {
width: 100%;
}
@media (max-width: 400px) {
.flex input,
.flex textarea {
margin-top: 10px;
margin-bottom: 10px;
}
}
@media (min-width: 400px) {
.flex-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:column;
padding: 10px;
}
.left {
width: 40%;
}
.right {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 60%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
}
感谢！ – DougLuce
显示您的CSS代码也... – Sunny
您可以尝试使用窗体属性...看看这里。 HTTP：//计算器。com/questions/6644128/html-input-field-form-of-form – Daniel
我真的没有和我的CSS相提并论，所以我认为我没有足够的资源来发布它。我已经尝试了flex容器中的前3个输入元素，设置了wth flex-flow：column。对于前三者来说，这种方式没有问题，但是在那边找到合适的消息框一直是个挑战。 – DougLuce