CODEWITHSUNDEEP
htmlcssflexbox
parsecer
parsecer

Reputation: 5106

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

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:

enter image description here

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>

Upvotes: 0

Views: 6562

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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>

Upvotes: 3

symlink
symlink

Reputation: 12209

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>

Upvotes: 1

Related Questions