Vue flex layout left and right content width is fixed and the middle is self-adaptive

Effect picture: (the width of the leftmost box and the "zuo" and "you" boxes is fixed, and the middle "1", "2" and "3" change with the visible width of the container)

 

<!-- 页面布局：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>

Layout structure: 

 1. The parent box opens display: flex; all child elements open flex by default: 1 1 auto; property, that is, whether there is a fixed width or not, the width will change with other elements; if you want to fix it, you need to add flex: 0 0 auto ;Attributes.

2. For elements with adaptive width, set the width: auto; attribute, and set the min-width or max-width attribute. flex: 1; fill the remaining width of the container.