Yy Craft

主题

Flex 弹性布局 ​

基本用法 ​

查看示例
vue
<template>
  <yy-flex>
    <yy-button>1</yy-button>
    <yy-button>2</yy-button>
    <yy-button>3</yy-button>
  </yy-flex>
</template>

主轴对齐 ​

查看示例
vue
<template>
  <yy-flex justify="center">
    <yy-button>center</yy-button>
  </yy-flex>
</template>

交叉轴对齐 ​

查看示例
vue
<template>
  <yy-flex align="flex-end">
    <yy-button>end</yy-button>
  </yy-flex>
</template>

垂直方向 ​

查看示例
vue
<template>
  <yy-flex vertical>
    <yy-button>A</yy-button>
    <yy-button>B</yy-button>
  </yy-flex>
</template>

间距 size ​

查看示例
vue
<template>
  <yy-flex>
    <yy-flex size="large">
      <yy-button>large</yy-button>
      <yy-button>large</yy-button>
    </yy-flex>
    <yy-flex :size="[8, 24]">
      <yy-button>8x24</yy-button>
      <yy-button>8x24</yy-button>
    </yy-flex>
  </yy-flex>
</template>

行内模式 ​

换行 ​

查看示例
vue
<template>
  <yy-flex wrap style="width:200px;">
    <yy-button style="width:120px;">
      1
    </yy-button>
    <yy-button style="width:120px;">
      2
    </yy-button>
  </yy-flex>
</template>

Props ​

参数说明类型默认值
align交叉轴对齐string-
inline是否为行内元素booleanfalse
justify主轴对齐stringflex-start
size间距'small' | 'medium' | 'large' | number | [number, number]medium
vertical是否垂直显示booleanfalse
wrap超出是否换行booleantrue