更新记录

1.0.0（2023-05-03） 下载此版本

完成

平台兼容性

Flex 弹性布局

Row 参数

Col 参数

示例

基础用法

<template>
    <ayi-row :gutter="20">
        <ayi-col span="4" :gutter="20">
            <view class="item">4</view>
        </ayi-col>
        <ayi-col span="12" :gutter="20">
            <view class="item">12</view>
        </ayi-col>
        <ayi-col span="8" :gutter="20">
            <view class="item">8</view>
        </ayi-col>
    </ayi-row>
    <ayi-row :gutter="20">
        <ayi-col span="8" :gutter="20">
            <view class="item">8</view>
        </ayi-col>
        <ayi-col span="8" :gutter="20">
            <view class="item">8</view>
        </ayi-col>
        <ayi-col span="8" :gutter="20">
            <view class="item">8</view>
        </ayi-col>
    </ayi-row>
    <ayi-row :gutter="20">
        <ayi-col span="14" :gutter="20">
            <view class="item">14</view>
        </ayi-col>
        <ayi-col span="4" :gutter="20">
            <view class="item">4</view>
        </ayi-col>
        <ayi-col span="6" :gutter="20">
            <view class="item">6</view>
        </ayi-col>
    </ayi-row>
</template>
<style lang="scss" scoped>
    .item {
        background-color: #f7f7f7;
        text-align: center;
        font-size: 28rpx;
        height: 60rpx;
        line-height: 60rpx;
        margin: 10rpx 0;
    }
</style>

分栏间隔

设置 gutter 参数

<ayi-row :gutter="20">
    <ayi-col span="4" :gutter="20"> 4 </ayi-col>
    <ayi-col span="12" :gutter="20"> 12 </ayi-col>
    <ayi-col span="8" :gutter="20"> 8 </ayi-col>
</ayi-row>