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