CSS 2 Column Form Layout Using Flexbox

Question

I'm trying to create a form layout as pictured below using Flexbox. The included example is a mock up from a portfolio site I'm building.

This is my form code, I've tried lots of different ways of getting it to look like my mock up using Flexbox, but haven't succeeded. Thanks for the help on this!

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

You could try to use the form attribute ... have a look here. http://stackoverflow.com/questions/6644128/html-input-field-outside-of-form — Daniel, Feb 05 '17 at 05:16
I really didn't get far with my CSS, so I didn't think I had enough to even post it. I've tried having the first 3 input elements in a flex container, set wth flex-flow: column. That works okay for the first three, but then getting the right message box to that side has been challenging. — DougLuce, Feb 05 '17 at 05:20
This is just what I want it to look like, thanks for the help! I'll see if I can see how you made this work. — DougLuce, Feb 05 '17 at 05:24

Asons · Accepted Answer · 2017-11-23T14:01:43.943

With the existing markup you can use flexbox column layout.

The main setting making the children to occupy the space how you want is:

flex-container need a height, here 60vh, so flex items know where and how to break flow
Message textarea having 100% height, which makes it break the flow and take full height
Subject textarea having flex: 1, which makes it take the available space left

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

If you can change markup and/or don't want to set a height on the flex-container, you can add a row layout to the above sample

Its main setting is:

flex-container, remove the flex-direction: column so its direction is row
Add a wrapper around the input's and subject 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>

Thank you, I really appreciate the time that you put into this. — DougLuce, Feb 05 '17 at 18:15

score 1 · Answer 2 · answered Feb 05 '17 at 09:33

In case you can modify the html you can add wrappers (flex left/right) and the css becomes easier (i think)

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

and then you need this css which also accommodates for very small screens less than 400 px (responsive design)... adjust the media query to your liking

.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+ */
  }
}

here it is in action https://jsfiddle.net/GiorgosK/L3w7t0k7/

CSS 2 Column Form Layout Using Flexbox

2 Answers2