WeUI Uniapp Design

Appearance

Flex 弹性布局 ​

基于 display: flex 的弹性布局容器，支持主轴方向、换行、主轴对齐、交叉轴对齐等配置。weui-flex 提供容器，weui-flex-item 提供 flex: 1 的子项。

基础用法 ​

weui-flex 默认主轴为 row，子项使用 weui-flex-item（默认 flex: 1）等分宽度。

1
2
3
查看代码
vue
<template>
  <weui-flex>
    <weui-flex-item>1</weui-flex-item>
    <weui-flex-item>2</weui-flex-item>
    <weui-flex-item>3</weui-flex-item>
  </weui-flex>
</template>

主轴对齐 ​

通过 justify 属性设置主轴对齐方式：start/center/end/between/around/evenly。此时子项使用固定宽度（非 flex:1）以体现间距差异。

start
B
C
center
B
C
end
B
C
between
B
C
around
B
C
查看代码
vue
<template>
  <weui-flex justify="center">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </weui-flex>
</template>

交叉轴对齐 ​

通过 align 属性设置交叉轴对齐方式：start/center/end/baseline/stretch。需为容器设置高度以体现差异。

start
高
C
center
高
C
end
高
C
查看代码
vue
<template>
  <weui-flex align="center" style="height: 80px;">
    <div class="box">A</div>
    <div class="box" style="height:60px;">高</div>
    <div class="box">C</div>
  </weui-flex>
</template>

换行 ​

通过 wrap 属性设置换行方式：nowrap（默认）/wrap/wrap-reverse。子项总宽超过容器时换行。

1
2
3
4
5
6
查看代码
vue
<template>
  <weui-flex wrap="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </weui-flex>
</template>

垂直布局 ​

通过 direction 属性设置主轴方向：row（默认）/column/row-reverse/column-reverse。

第一行
第二行
第三行
查看代码
vue
<template>
  <weui-flex direction="column">
    <div class="box">第一行</div>
    <div class="box">第二行</div>
    <div class="box">第三行</div>
  </weui-flex>
</template>

子项比例 ​

通过 weui-flex-item 的 flex 属性自定义子项的 flex 值（不传时为 flex:1）。

flex 1
flex 2
flex 3
查看代码
vue
<template>
  <weui-flex>
    <weui-flex-item :flex="1">flex 1</weui-flex-item>
    <weui-flex-item :flex="2">flex 2</weui-flex-item>
    <weui-flex-item :flex="3">flex 3</weui-flex-item>
  </weui-flex>
</template>

Flex Attributes ​

参数说明类型默认值
direction主轴方向'row' | 'column' | 'row-reverse' | 'column-reverse''row'
wrap换行方式'nowrap' | 'wrap' | 'wrap-reverse''nowrap'
justify主轴对齐'start' | 'end' | 'center' | 'between' | 'around' | 'evenly''start'
align交叉轴对齐'start' | 'end' | 'center' | 'baseline' | 'stretch''center'
ext-class附加在根元素上的扩展类名string—

FlexItem Attributes ​

参数说明类型默认值
flex自定义 flex 值，不传时使用 weui-flex__item 的 flex:1number—
ext-class附加在根元素上的扩展类名string—

Flex Slots ​

名称说明
default子项内容，可包含 weui-flex-item 或任意元素