html - 你如何让 flex 元素填充剩余空间?

标签 html css flexbox

<分区>

大家好,我正在为一个网站制作工作申请表。我正在使用 flexbox 进行布局,但在 <div class="row row-9"> 上我有一个标签元素位于左侧,一个输入元素位于右侧。我正在使用 justify-content: space-between;将它们分开。但是我希望输入字段扩展以填充所有空白区域。我会用 width 属性来做这个吗?此外,我什至使此表单正确吗?我有许多具有一个属性的 css 规则,而且 html 看起来也不太好。我以前只制作过另一种形式。感谢您的帮助:)

https://jsfiddle.net/wpm1crtz/1/

最佳答案

输入{ flex :2

或者您想要输入的宽度。 例如,如果你放 flex:2 ,它基本上会占据行的 66%, flex:1 会占 50% 等等。

关于html - 你如何让 flex 元素填充剩余空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54602343/

上一篇:css - css中如何通过一些工具获取内联元素的行内框和内容区域的具体位置,比如chrome dev tools?

下一篇:html - Bootstrap 下拉菜单显示相同的信息

相关文章:

html - 循环中的剪辑路径在 Safari 浏览器中无法正常工作

html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素?

html - 垂直对齐多行图像

html - 如何将列表项 float 到页面顶部?

css - 我可以合并 :nth-child() or :nth-of-type() with an arbitrary selector? 吗

css - CSS中价格等级后的货币符号

html - 在居中列中对齐元素

javascript - jQuery-如何在尝试切换另一个 div 时关闭由 h2 元素切换的 div?

javascript - 动态创建 div 容器并将它们添加到现有的 div 中

jquery - 在输入框光标后添加不可编辑的文字