css 如何在不更改列布局的情况下填充可用空间

brvekthn 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(131)

我有一个文本域和一个按钮在同一行。我希望文本域占据所有可用空间，而按钮只占据与按钮上的文本相关的空间。
视觉上，我可以通过将按钮放在第12列来解决这个问题。

然而，这只在浏览器全屏时有效，因为调整浏览器大小会缩小按钮。

有没有什么方法可以在不把按钮放在第12列的情况下拉伸文本域以填充所有可用空间（如图1所示），这样在调整浏览器大小时按钮就不会缩小？

1条答案

是的，你可以做到，看看这个例子

.wrapper
{
  display: flex;
}

input {
  flex: 1 1 auto;
}

<div class="wrapper">
    <input />
    <button>confirm</button>
</div>

justify-content在元素之间创建了空间，flex扩展了元素，使它们占据了所有空间。flex: 1 1 auto是像这样的表单的最佳选择，因为它不改变按钮的大小，但改变了输入。
如果您需要，这里有更深入的解释：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
为了更深入的理解https://developer.mozilla.org/en-US/docs/Web/CSS/flex