Flexbox导致中间元素偏移，如何让输入框始终居中？

嘿，我来帮你解决这个输入框偏移的问题！

你当前的布局之所以在球队名称长度不同时出问题，核心原因是Flexbox子项的默认最小宽度规则：Flexbox里的子元素默认会保持min-width: auto，也就是宽度不会小于自身内容的宽度。当你给三个div都设置flex:1时，它们本应平分空间，但一旦左右两侧的球队名称过长，左右两个黄色div就会被内容撑开，抢走中间红色区域的空间，直接导致输入框偏移。

下面给你几个实用的修复方案，任选其一都能解决问题：

方案一：限制左右区域的压缩下限 #

给左右两个黄色div加上min-width: 0，这样它们可以被压缩到小于内容宽度（你可以额外加overflow: hidden或text-overflow: ellipsis来处理过长文本的显示），中间区域就能稳定占据剩余空间，输入框自然保持居中。

修改后的代码：

<div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "space-around", alignItems: "stretch" }} >
  <div style={{ backgroundColor: "yellow", flex: 1, minWidth: 0 }}>
    <div style={{ justifyContent: "flex-start", display: "flex", flexFlow: "row nowrap"}} >
      <div>FLAG</div>
      <div>HOME_TEAM</div>
    </div>
  </div>
  <div style={{ backgroundColor: "red", flex: 1 }}>
    <div style={{ justifyContent: "center", display: "flex", flexFlow: "row nowrap"}} >
      <div>Input1</div>
      <div>x</div>
      <div>Input2</div>
    </div>
  </div>
  <div style={{ backgroundColor: "yellow", flex: 1, minWidth: 0 }}>
    <div style={{ justifyContent: "flex-end", display: "flex", flexFlow: "row nowrap"}} >
      <div>AWAY_TEAM_WITH_VERY_LONG_NAME</div>
      <div>FLAG</div>
    </div>
  </div>
</div>

方案二：固定左右区域的宽度占比 #

如果你希望左右区域保持固定的宽度比例（比如各占30%），可以把flex:1改成固定的flex-basis值，同时禁用收缩，这样不管内容多长，左右区域都不会抢占中间空间：

<div style={{ display: "flex", flexFlow: "row nowrap", alignItems: "stretch" }} >
  <div style={{ backgroundColor: "yellow", flex: 0 0 30% }}>
    <div style={{ justifyContent: "flex-start", display: "flex", flexFlow: "row nowrap"}} >
      <div>FLAG</div>
      <div>HOME_TEAM</div>
    </div>
  </div>
  <div style={{ backgroundColor: "red", flex: 1, display: "flex", justifyContent: "center", alignItems: "center" }}>
    <div style={{ display: "flex", flexFlow: "row nowrap", gap: "8px"}} >
      <div>Input1</div>
      <div>x</div>
      <div>Input2</div>
    </div>
  </div>
  <div style={{ backgroundColor: "yellow", flex: 0 0 30% }}>
    <div style={{ justifyContent: "flex-end", display: "flex", flexFlow: "row nowrap"}} >
      <div>AWAY_TEAM_WITH_VERY_LONG_NAME</div>
      <div>FLAG</div>
    </div>
  </div>
</div>

这里我还给中间区域直接加了display:flex和justify-content:center，进一步确保输入框始终居中。

方案三：改用Grid布局（更简洁直观） #

Grid布局天生适合这种三列场景，代码更简单，也能完美保证中间输入框居中：

<div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "stretch", gap: "16px" }} >
  <div style={{ backgroundColor: "yellow", display: "flex", justifyContent: "flex-start" }}>
    <div>FLAG</div>
    <div>HOME_TEAM</div>
  </div>
  <div style={{ backgroundColor: "red", display: "flex", justifyContent: "center", alignItems: "center" }}>
    <div style={{ display: "flex", gap: "8px"}} >
      <div>Input1</div>
      <div>x</div>
      <div>Input2</div>
    </div>
  </div>
  <div style={{ backgroundColor: "yellow", display: "flex", justifyContent: "flex-end" }}>
    <div>AWAY_TEAM_WITH_VERY_LONG_NAME</div>
    <div>FLAG</div>
  </div>
</div>

gridTemplateColumns: "1fr auto 1fr"表示左右两列平分剩余空间，中间列宽度自适应内容，再配合内部的flex布局，输入框永远不会偏移。

内容的提问来源于stack exchange，提问作者Fernando Maymone