使用flexbox进行输入字段换行 [英] Input field wrapping using flexbox
问题描述
我是Flexbox的新手,我试图创建一个输入表单,如下图所示.首先,假定两个字段为div宽度的50%,另两个字段为100%宽度.在移动视图中,它们应该相互堆叠.我可以使用宽度"和高度"textarea上的属性?
I'm new to the flexbox, and I tried to create an input form like in the picture below. First, two fields are supposed to be 50% of the width of div, other two are 100% width. In the mobile view, they are supposed to stack on each other. Can I use "width" and "height" attributes on textarea?
.form{
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: center;
width: 100%;
}
.input-flex{
max-width: 600px;
}
input, textarea{
border: 0;
border-radius: 6px;
padding: 2%;
background-color: darkgray;
margin-right: 5%;
margin-bottom: 5%;
flex:1 0 100%;
}
<div class="form">
<div class="input-flex">
<input type="text" name="name" placeholder="Name*"/>
<input type="email" name="email" placeholder="E-mail*"/>
<input type="tel" name="number" placeholder="Phone number*"/>
<textarea cols="55" rows="15" placeholder="Questions"></textarea>
</div>
</div>
推荐答案
请注意,即使元素位于 .input-flex
-所以我只是将样式复制到了此元素.
Please note that you defined .form
as the flex parent, even though your elements were inside .input-flex
- so I just copied the style to this element.
关于您的问题:通过使用专用的类,您可以指定哪些元素应具有100%的宽度.
Regarding your question: by using a dedicated class, you can specify which elements should have 100% width.
除此之外,我将 margin
更改为在元素周围保持不变,因此结果与设计更好地匹配.
Other than that, I changed the margin
to be constant all around the elements, so the result better matches the design.
.form {
width: 100%;
}
.input-flex {
max-width: 600px;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: center;
}
input,
textarea {
border: 0;
border-radius: 6px;
padding: 2%;
background-color: darkgray;
margin: 10px;
box-sizing: border-box;
flex-grow: 1;
}
.full-width {
width: 100%;
}
<div class="form">
<div class="input-flex">
<input type="text" name="name" placeholder="Name*" />
<input type="email" name="email" placeholder="E-mail*" />
<input type="tel" class="full-width" name="number" placeholder="Phone number*" />
<textarea cols="55" rows="15" class="full-width" placeholder="Questions"></textarea>
</div>
</div>
这篇关于使用flexbox进行输入字段换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!