Vue Flex-Layout linke und rechte Inhaltsbreite ist festgelegt und die Mitte ist selbstanpassend

Effektbild: (Die Breite des Kästchens ganz links und der Kästchen "zuo" und "you" ist fest, und die mittleren "1", "2" und "3" ändern sich mit der sichtbaren Breite des Containers)

 

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

Layoutstruktur: 

 1. Die übergeordnete Box aktiviert display: flex; alle untergeordneten Elemente aktivieren standardmäßig flex: 1 1 auto; Attribut, das heißt, ob es eine feste Breite gibt oder nicht, die Breite ändert sich mit anderen Elementen; wenn Sie es korrigieren möchten , müssen Sie flex hinzufügen: 0 0 auto ;Attribute.

2. Legen Sie für Elemente mit adaptiver Breite das Attribut width: auto; und das Attribut min-width oder max-width fest. flex: 1; Füllen Sie die verbleibende Breite des Containers.