在 flex-direction: column 中显示一行中的 flex 项

Question

我有一个注册表单，其中包含 6 个input项， form元素是一个 flex 容器。 flex-direction是表单中的column ，因此所有input元素每行显示 1 个：

有没有办法让它每行显示两个项目，像这样：

我尝试设置flex-direction: row和 put

<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

而不是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>

Answer 2

您还可以为此使用网格：

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>