Display flex items in a row in flex-direction: column

Question

I have a sign up form with 6 input items inside a form element which is a flex container. The flex-direction is column in the form, therefore all input elements get displayed 1 per row:

Is there a way to make it display two items per row, like this:

I tried setting flex-direction: row and putting

<div class="line-break"></div>


.line-break {
    width: 100%;
}

after each input element, but it didn't work.

JSFiddle

form {
  width: 100%;
  height: 100%;
  /*
    border: 1px solid white;
    */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/*
Just for style, nevermind it
*/

.form-input {
  height: 20px;
  width: 50%;
  background-color: silver;
  border-radius: 10px;
  border: none;
  padding: 6px;
  margin: 15px;
}

<form action="/login">
  <h2 class="form-title">Sing up</h2>

  <input class="form-input" type="text" placeholder="First Name" name="firstname">
  <div class="line-break"></div>
  <input class="form-input" type="text" placeholder="Last Name" name="lastname">

  <input class="form-input" type="text" placeholder="Email" name="email">

  <input class="form-input" type="password" placeholder="Password" name="password">
  <input class="form-input" type="password" placeholder="Confirm" name="confirm">

  <input class="form-input" type="text" placeholder="Age" name="age">
</form>

You need to either use css grid or change html structure – Anurag Srivastava Mar 23 '20 at 17:33 — Anurag Srivastava, Mar 23 '20 at 17:33

Michael Benjamin · Answer 1 · 2020-03-23T19:43:48.380

Instead of flex-direction: column use row with flex-wrap: wrap.

Then set the header to take up 100% of the width, and the inputs to take 50%. This will force subsequent items to new rows.

Use the order property to arrange the visual order of the inputs.

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
}

.form-title {
  flex: 0 0 100%;
  text-align: center;
}

.form-input {
  flex: 1 0 40%; /* allows space for margins */
}


/* Just for style, nevermind it */
.form-input {
  height: 20px;
  background-color: silver;
  border-radius: 10px;
  border: none;
  padding: 6px;
  margin: 15px;
}

<form action="/login">
  <h2 class="form-title">Sign up</h2>
  <input class="form-input" type="text" placeholder="First Name" name="firstname">
  <input class="form-input" type="text" placeholder="Last Name" name="lastname">
  <input class="form-input" type="text" placeholder="Email" name="email">
  <input class="form-input" type="password" placeholder="Password" name="password">
  <input class="form-input" type="password" placeholder="Confirm" name="confirm">
  <input class="form-input" type="text" placeholder="Age" name="age">
</form>

score 1 · Accepted Answer · answered Mar 23 '20 at 19:17

You can also use a Grid for this:

form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr)
}

h2{
   grid-column: 1/3;
   text-align: center;
}

form {
  width: 100%;
  height: 100%;
  /*
    border: 1px solid white;
    */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr)
}


/*
Just for style, nevermind it
*/

.form-input {
  height: 20px;
  background-color: silver;
  border-radius: 10px;
  border: none;
  padding: 6px;
  margin: 15px;
}

h2{
   grid-column: 1/3;
    text-align: center;
}

<form action="/login">
  <h2 class="form-title">Sign up</h2>

  <input class="form-input" type="text" placeholder="First Name" name="firstname">
  <input class="form-input" type="text" placeholder="Last Name" name="lastname">

  <input class="form-input" type="text" placeholder="Email" name="email">

  <input class="form-input" type="password" placeholder="Password" name="password">
  <input class="form-input" type="password" placeholder="Confirm" name="confirm">

  <input class="form-input" type="text" placeholder="Age" name="age">
</form>

Display flex items in a row in flex-direction: column

2 Answers2