Javascript 使DIV'；s从中心div向外扩展，而不是向内扩展

我连续有三个div

左边一个，中间一个，右边一个。< /P> 左边和右边的人需要从中间的一边扩大。

请看图片：

my clients.php，其中显示所有客户

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
    $positive = $client['Pos'];
    $negative = $client['Neg'];
    $total = ($positive + $negative);

    // Calculate width in percentage
    if ($total > 0) 
    {
        $positiveWidth = ($positive/$total)*100;
        $negativeWidth = ($negative/$total)*100; 
    }
    else
    {
        $positiveWidth = "0%";
        $negativeWidth = "0%";
    }


    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

            "
            <div class='positive-bar' style='width: $positiveWidth;%;'></div>

            <div style='display: inline-block; width: 5%;'>      
                <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
            </div>" .

                 "<div id='client-name' class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

            "<div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
            </div>

            <div class='negative-bar' style='width: $negativeWidth;%;'></div>

         </div> 
        <br />";
}

echo "</div>";

所以我的问题是

---

如何使DIV（进度条）向外扩展而不是向内推进。

尝试使用flexbox进行扩展。

.container{
宽度：100%；
显示器：flex；
弯曲方向：行；
保证金：5px0；
}
米德尔顿先生{
柔性生长：1；
高度：25px；
文本对齐：居中；
边框：1px纯红；
}
.右一，.左一{
高度：25px；
宽度：25%；
最小宽度：100px；
边框：1px纯绿色；
显示器：flex；
}
.左一{
证明内容：柔性端；
}
.右一{
调整内容：灵活启动；
}
.进展{
背景颜色：绿色；
保证金：0；
填充：0；
高度：25px；
}

满足于此
满足于此
满足于此
满足于此

你能给出你对答案的反馈吗？那么为什么中间的答案是

文本对齐：居中而不是
内容对齐：居中
@sweaver2112
justify content:center用于设置为
display:flex的元素它将所有子元素水平居中对齐，无论它们是
还是
还是
<代码>文本对齐：居中可用于任何元素，以使文本居中。如果你喜欢这个答案，不介意留下一个向上的投票。但是中间的部分是display:flex。你是说这两种方法都有效吗？如果你是在谈论我答案中的片段
.middleOne
未设置为
display:flex，可能您混淆了flex-grow:1带
显示：flex。但如果你问的是一般情况，那么是的。如果删除
文本对齐：居中，则
.middleOne
中的文本将居中和添加
显示：flex；证明内容：中心
.positive-bar
{
  height: 25px;
  background-color: #64BE06;
  display: inline-block;
  border-radius: 5px;
}

.negative-bar
{
  height: 25px;
  background-color: red;
  display: inline-block;
  border-radius: 5px;
}