Question

我尝试使用Flexbox创建如下图所示的表单布局。所包含的示例是来自我建立的投资组合网站的模拟。

这是我的表单代码，我已经尝试了很多不同的方式让它看起来像我使用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>

Answer 1

使用现有标记，您可以使用flexbox列布局。

让孩子们占据你想要的空间的主要设置是：

flex-container需要一个高度，这里是60vh，所以flex项目知道在哪里以及如何打破流量
消息textarea具有100％的高度，这会使其打破流量并占据全高
主题textarea拥有flex: 1，这会占用可用空间

＆＃13;

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

＆＃13;

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

＆＃13;

如果您可以更改标记和/或不想在flex-container上设置高度，则可以在上面的示例中添加row布局

其主要设置是：

flex-container，移除flex-direction: column，使其方向为row
在输入栏周围添加一个包装器并且主题textarea

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您可以修改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+ */
  }
}

此处处于行动中https://jsfiddle.net/GiorgosK/L3w7t0k7/

CSS 2列表格布局使用Flexbox

2 个答案: