[英]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.我有一个注册表单,其中包含 6 个
input
项, form
元素是一个 flex 容器。 The flex-direction
is column
in the form, therefore all input
elements get displayed 1 per row: flex-direction
是表单中的column
,因此所有input
元素每行显示 1 个:
Is there a way to make it display two items per row, like this:有没有办法让它每行显示两个项目,像这样:
I tried setting flex-direction: row
and putting我尝试设置
flex-direction: row
和 put
<div class="line-break"></div>
.line-break {
width: 100%;
}
after each input
element, but it didn't work.在每个
input
元素之后,但它不起作用。
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>
Instead of flex-direction: column
use row
with flex-wrap: wrap
.而不是
flex-direction: column
使用row
和flex-wrap: wrap
。
Then set the header to take up 100% of the width, and the inputs to take 50%.然后设置标题占宽度的 100%,输入占 50%。 This will force subsequent items to new rows.
这将强制后续项目到新行。
Use the order
property to arrange the visual order of the inputs.使用
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.