使中间的div填充剩余空间[重复]答案

【问题标题】：Make div in the middle fill remaining space [duplicate]使中间的div填充剩余空间[重复]
【发布时间】：2018-04-02 02:14:06
【问题描述】：

我有这个 HTML 结构（简体）。我想让它的标志，input 和 button 是：

1) 在标题中垂直对齐

2) 徽标和按钮具有固定大小。我希望这两个项目中间的input 成为它们之间剩余的width。

（标志在左边，button 在右边。Input 然后是中间位的宽度）

然后在调整窗口大小时，input 文本会自动调整大小。

<div class="header">
    <div id="logo">Logo here</div>
    <input type="text"/>
    <div class="button>Button title</div>
</div>

【问题讨论】：

您探索过flex-box 解决方案吗？如果您不担心与旧版浏览器的兼容性，这将是最有效的方法，让浏览器完成所有计算。 弹性 - CSS | MDN： developer.mozilla.org/en-US/docs/Web/CSS/flex

标签： html css

【解决方案1】：

使用 flexbox 你可以做到这一点，

将display: flex; 应用到父级（.header），所以整个容器现在是一个弹性元素
在父级 (.header) 中使用 align-items:center 垂直对齐它们，查看更多关于 align-items
申请flex:1（简写为flex-grow:1flex-shrink:1flex-basis:0）到input增加剩余空间

.header {
  display: flex;
 /* justify-content: space-between; */  /* this is optional, because input{flex:1} is doing its job */
  align-items:center;
  /*demo*/
  border:1px solid red;
  height:60px;
}

input {
  flex: 1;
  /*demo*/
  margin: 0 10px;
}

<div class="header">
  <div id="logo">Logo here</div>
  <input type="text" />
  <div class="button">Button title</div>
</div>

【讨论】：