Vue组件开发系列之Flex组件

2018-10-30 本文已影响12人 vue爱好者

组件说明：
一个让子元素竖着排列的组件，（只有子元素个数大于1个时，才会有效果）

TIM图片20181030164146.png

组件结构：

<template>
    <div class='wt-flex'>
        <slot></slot>
    </div>
</template>

css代码：

.wt-flex {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     height: 100%;
 }