如何解决在宽度为100%的容器上使用柔性包装
我正在尝试使用一种表单,其中包含 name 和 lastname 的输入。我希望我的输入是内联的,并且在没有足够的空间可以包裹的情况下水平地占据100%的可用空间。您可以在jsfiddle https://jsfiddle.net/sbfm9ygo/22/中看到此方法正常工作(输入是内联的,当您缩小屏幕时,它们会自动换行)。
只有当元素的宽度不是100%时,我才能使用flex-wrap
属性但使用flexbox实现此目的。在jsfiddle中,如果取消注释width: 100%
,您将注意到它不再起作用。如何在使元素占用100%可用空间的同时实现jsfiddle上显示的功能?我正在尝试不使用媒体查询来执行此操作。
解决方法
您可以使用flex-grow: 1;
而不是width: 100%
进行修复:
.form-container {
display: flex;
flex-wrap: wrap;
}
.form-container div {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 1rem;
}
<div class="form-container">
<div>
<label>Label1</label>
<input value="input1" />
</div>
<div>
<label>Label2</label>
<input value="input2" />
</div>
</div>
检查jsfiddle。
, flex
:1将它们等分,而min-width: 150px;
将阻止input
缩小尺寸
.form-container {
display: flex;
flex-wrap: wrap;
}
.form-container div {
flex: 1;
display: flex;
flex-direction: column;
min-width: 150px;
margin: 1rem;
}
<div class="form-container">
<div>
<label >Label1</label>
<input value="input1"/>
</div>
<div>
<label >Label2</label>
<input value="input2"/>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。