Flexbox推动元素的中心

Question

我想做一个投注应用，用这样的线框：

为此，即时使用此代码：

       <div
        style={{
          display: "flex",
          flexFlow: "row nowrap",
          justifyContent: "space-around",
          alignItems: "stretch"
        }}
      >
        <div style={{ backgroundColor: "yellow", flex:1 }}>
          <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 }}>
          <div style={{justifyContent: "flex-end", display: "flex",
          flexFlow: "row nowrap"}} >
            <div>AWAY_TEAM</div>  
            <div>FLAG</div>
          </div>
        </div>

      </div>

当AWAY_TEAM和HOME_TEAM具有相同的大小时。事情看起来不错，比如：

但是如果AWAY_TEAM名称的长度不同，则会启动＆＃34;推送＆＃34;其他的div;

但我希望我的INPUTS始终处于中心位置。

我在CSS上做错了什么？

Answer 1

要使输入部分保持在中心位置，主队和客队球队需要始终具有相同的宽度。

所以，如果你知道输入部分需要width， - 说120px - 那么你也会知道你总是想要主队和客队具有宽度的部分：

calc((100% - 120px) / 2)

因此，您可以将输入部分的flex声明为：

.inputs-section {flex: 0 0 120px;}

ie。 使这个120px宽，不要长大，不要缩小它。

以及主队和客队的部分：

.home-team-section,
.away-team-section {
flex: 0 0 calc((100% - 120px) / 2);
}

ie。 使包含<div>减去120px的整个宽度的一半，都不会增长他们，不要缩小它们。

工作示例：

.container {
display: flex;
}

.container div {
display: inline-block;
}

.inputs {
flex: 0 0 120px;
text-align: center;
background-color: rgb(255, 0, 0);
}

.home-team,
.away-team {
flex: 0 0 calc((100% - 120px) / 2);
background-color: rgb(255, 255, 0);
}

.away-team {
text-align: right;
}

.home-team div:nth-of-type(odd),
.away-team div:nth-of-type(even) {
width: 30%;
}

.home-team div:nth-of-type(even),
.away-team div:nth-of-type(odd) {
width: 65%;
}

<div class="container">
<div class="home-team">
<div>FLAG</div>  
<div>HOME_TEAM</div>
<div>FLAG</div>  
<div>HOME_TEAM</div>
<div>FLAG</div>  
<div>HOME_TEAM</div>
<div>FLAG</div>
<div>HOME_TEAM</div>
</div>

<div class="inputs">
<div>Input1</div>  
<div>x</div>
<div>Input2</div>

<div>Input1</div>  
<div>x</div>
<div>Input2</div>

<div>Input1</div>  
<div>x</div>
<div>Input2</div>

<div>Input1</div>  
<div>x</div>
<div>Input2</div>
</div>

<div class="away-team">
<div>AWAY_TEAM</div>  
<div>FLAG</div>
<div>AWAY_TEAM</div>  
<div>FLAG</div>
<div>AWAY_TEAM</div>  
<div>FLAG</div>
<div>AWAY_TEAM</div>  
<div>FLAG</div>
</div>
</div>