html - 使表单输入字段占据 div 中未被其他元素占用的所有宽度

Question

我有一个居中的 div，其中连续包含标题、输入和按钮。我想扩展输入字段，使 div 内容的总宽度占据分配给 div 的整个宽度。是否有一些 CSS 方法来指定类似 width: 100%-other_elems 的内容？

Answer 1

Is there some CSS way to specify something like width: 100%-other_elems?

是的，使用 flex-box .浏览器布局引擎的 Flexbox 部分，用于创建动态和灵活的框或 div。请参阅下面的示例并尝试调整大小。引用 CSS 技巧的 flexbox tutorial有关 flexbox 的完整概述。这是一个很棒的引用，我一直在使用它。

CSS 纲要:

• display: flex on .some-container 声明任何具有类 some-container 的元素都将使用 flexbox。
• flex: 1 on .expand 声明在父 flexbox(即 some-container)中该元素应该增长.

.some-container { display: flex; }

.expand { flex: 1; }

<div class="some-container">
  <h1>some header</h1>
  <input class="expand" type="text">
  <button>some button</button>
</div>