使用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>
                    一、项目场景例如：页面头部分三部分，左侧宽度固定，中间宽度由文字撑开，右侧自动填充剩余宽度二、解决方案使用fflex-grow 属性用于设置或检索弹性盒子的扩展比率。。注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。&lt;div class="box"&gt;        &lt;div class="left"&gt;&lt;/div&gt;        &lt;div class="center"&gt;宽度由内容撑开&lt;/div&gt;