<template>
    <base-container>
        <el-card header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色">
            <div class="father">
                <div class="child1">单个子元素</div>
            </div>

            <div class="father">
                <div class="child1">子元素1</div>
                <div class="child1">子元素2</div>
                <div class="child1">子元素3</div>
            </div>
        </el-card>
    </base-container>
</template>

<style lang="scss" scoped>
.father {
    display: flex;
    align-items: center;
    height: 120px;

    & > .child1 {
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin: 0 20px;
    }

    & > .child1:only-child {
        margin: 0px;
        background: yellow;
    }
}
</style>
