Отображение элементов Flex в строке в направлении Flex: столбец

Question

У меня есть форма регистрации с 6 input элементами внутри элемента form, который представляет собой гибкий контейнер. flex-direction - это column в форме, поэтому все элементы input отображаются по 1 в строке:

Есть ли способ заставить отображать два элемента в строке, например:

Я попытался установить flex-direction: row и поставить

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


.line-break {
    width: 100%;
}

после каждый элемент input, но он не работал.

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>

Answer 1

Вы также можете использовать Сетка для этого:

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>

Answer 2

Вместо flex-direction: column используйте row с flex-wrap: wrap.

Затем установите заголовок на 100% ширины, а вводы на 50%. Это заставит последующие элементы в новые строки.

Используйте свойство order, чтобы упорядочить визуальный порядок ввода.

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>