vue flex布局 左右内容宽度固定 中间自适应

效果图：（最左侧盒子 及 “zuo”、“you”盒子宽度固定，中间的“1”“2”“3”随容器可视宽度变化）

 

<!-- 页面布局：flex 宽度自适应 -->
<template>
    <div style="display: flex;align-items: center;">
        <div id="left-box"></div>
        <div id="flex-box">
            <div class="left">zuo</div>
            <div class="center">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </div>
            <div class="right">you</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'flex_box',
    data() { return {} },
}
</script>

<style scoped lang="less">
#left-box{
    width: 250px;
    height: 500px;
    border: 1px solid;
    margin-top: 100px;
    flex: 0 0 auto;
}

#flex-box{
    width: 100%;
    height: 50px;
    display: flex;
    .left, .right{
        width: 100px;
        height: 100%;
        text-align: center;
        flex: 0 0 auto;    // 固定，不自适应
        border: 1px dashed;
    }

    .center{
        width: auto;
        display: flex;
        flex: 1;
        li{
            width: auto;
            min-width: 150px;
            height: 50px;
            border: 1px solid;
            box-sizing: border-box;
            flex: 1;
            text-align: center;
        }
    }
}
</style>

布局结构： 

 1、父盒子开启了display：flex；则所有子元素默认开启 flex：1 1 auto；属性，即不论有没有固定宽度，宽度都会随着其他元素改变；想要固定则需要添加 flex：0 0 auto；属性。

2、想要自适应宽度的元素，设置width：auto；属性，并设置 min-width 或者 max-width 属性。flex：1；撑满容器剩余宽度。