Fullbox.vue

<template>
    <div style="display:flex" v-bind:class="classObj">
        <div style="flex:1">
            <slot>
            </slot>
        </div>
        <div style="display:inline-block">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script>
export default {
    prop:{
        align: {
            type: [String],
            default: 'row'
        },
    },
    computed:{
        classObj(){
            return {
                fullbox:true,
                'fullbox-alignRow':this.align!='col',
                'fullbox-alignCol':this.align=='col'
            }
        }
    }
    
}
</script>
<style>
    .fullbox{
        display:flex;
    }
    .fullbox-alignRow{
        flex-direction: row;
    }
    .fullbox-alignCol{
        flex-direction: column;
    }
</style>