div宽度自动充满剩余空间

一、项目场景

例如：页面顶部分三部分，左侧宽度固定，中间宽度由文字撑开，右侧自动填充剩余宽度

---

二、解决方案

使用fflex-grow 属性用于设置或检索弹性盒子的扩展比率。。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

<div class="box">
  <div class="left"></div>
  <div class="center">宽度由内容撑开</div>
  <div class="right"></div>
</div>

<style>
    .box{
        width:300px;
        height:50px;
        border:1px solid black;
        display: flex;
    }
    .left{
        width:100px;
        height:100%;
        background:red;
    }
    .center{
        height:100%;
        color:white;
        font-weight:600;
        line-height: 50px;
        background:skyblue;
    }
    .right{
        height:100%;
        background: greenyellow;
        flex-grow: 1;
    }
</style>