"Flex弹性布局"组件:<flex-row><flex-col> —— 快应用组件库H-UI

-w603

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row h-style="margin-top: 30px;margin-bottom: 30px;">
            <flex-col bg-color="bg-primary" justify="center">
                <text>A</text>
            </flex-col>
            <flex-col bg-color="bg-info" justify="center">
                <text>B</text>
            </flex-col>
            <flex-col bg-color="bg-primary" justify="center">
                <text>C</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w604

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row h-style="margin-top: 30px;margin-bottom: 30px;">
            <flex-col width="3" bg-color="bg-primary" justify="center">
                <text>A</text>
            </flex-col>
            <flex-col width="6" bg-color="bg-info" justify="center">
                <text>B</text>
            </flex-col>
            <flex-col width="2" bg-color="bg-primary" justify="center">
                <text>C</text>
            </flex-col>
            <flex-col width="1" bg-color="bg-info" justify="center">
                <text>D</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w605

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
       <flex-row h-style="margin-top: 30px;margin-bottom: 30px;">
            <flex-col offset="2" bg-color="bg-primary" justify="center">
                <text>A</text>
            </flex-col>
            <flex-col offset="3" bg-color="bg-info" justify="center">
                <text>B</text>
            </flex-col>
            <flex-col bg-color="bg-primary" justify="center">
                <text>C</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w604

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row wrap="wrap" h-style="margin-top: 30px;margin-bottom: 30px;">
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>A</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-info" justify="center">
                <text>B</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>C</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-info" justify="center">
                <text>D</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>E</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w605

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row wrap="wrap-reverse" h-style="margin-top: 30px;margin-bottom: 30px;">
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>A</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-info" justify="center">
                <text>B</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>C</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-info" justify="center">
                <text>D</text>
            </flex-col>
            <flex-col width="4" bg-color="bg-primary" justify="center">
                <text>E</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w605

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row h-style="margin-bottom: 20px;">
            <flex-col bg-color="bg-primary" justify="center" h-style="height: 100px;">
                <text>A</text>
            </flex-col>
            <flex-col bg-color="bg-info" justify="center">
                <text>默认对齐方式 -- stretch</text>
            </flex-col>
        </flex-row>

        <flex-row align="top" h-style="margin-bottom: 20px;">
            <flex-col bg-color="bg-primary" justify="center" h-style="height: 100px;">
                <text>B</text>
            </flex-col>
            <flex-col bg-color="bg-info" justify="center">
                <text>顶部对齐 -- top</text>
            </flex-col>
        </flex-row>

        <flex-row align="middle" h-style="margin-bottom: 20px;">
            <flex-col bg-color="bg-primary" justify="center" h-style="height: 100px;">
                <text>C</text>
            </flex-col>
            <flex-col bg-color="bg-info" justify="center">
                <text>居中对齐 -- middle</text>
            </flex-col>
        </flex-row>

        <flex-row align="bottom" h-style="margin-bottom: 20px;">
            <flex-col bg-color="bg-primary" justify="center" h-style="height: 100px;">
                <text>D</text>
            </flex-col>
            <flex-col bg-color="bg-info" justify="center">
                <text>底部对齐 -- bottom</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>

-w604

<import name="flex-row" src="../Common/ui/h-ui/basic/c_flex_row"></import>
<import name="flex-col" src="../Common/ui/h-ui/basic/c_flex_col"></import>
<template>
    <div class="container">
        <flex-row h-style="margin-bottom: 20px;">
            <flex-col width="5" bg-color="bg-primary" justify="center">
                <text>默认左对齐</text>
            </flex-col>
            <flex-col width="5" bg-color="bg-info" justify="center">
                <text>left</text>
            </flex-col>
        </flex-row>

        <flex-row justify="right" h-style="margin-bottom: 20px;">
            <flex-col width="5" bg-color="bg-primary" justify="center">
                <text>右对齐</text>
            </flex-col>
            <flex-col width="5" bg-color="bg-info" justify="center">
                <text>right</text>
            </flex-col>
        </flex-row>

        <flex-row justify="center" h-style="margin-bottom: 20px;">
            <flex-col width="5" bg-color="bg-primary" justify="center">
                <text>居中对齐</text>
            </flex-col>
            <flex-col width="5" bg-color="bg-info" justify="center">
                <text>center</text>
            </flex-col>
        </flex-row>

        <flex-row justify="between" h-style="margin-bottom: 20px;">
            <flex-col width="5" bg-color="bg-primary" justify="center">
                <text>两端对齐</text>
            </flex-col>
            <flex-col width="5" bg-color="bg-info" justify="center">
                <text>between</text>
            </flex-col>
        </flex-row>

        <flex-row justify="around" h-style="margin-bottom: 20px;">
            <flex-col width="5" bg-color="bg-primary" justify="center">
                <text>两侧的间隔相等</text>
            </flex-col>
            <flex-col width="5" bg-color="bg-info" justify="center">
                <text>around</text>
            </flex-col>
        </flex-row>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
    .container text {
         color: #ffffff;
    }
</style>
扫码体验

-w260

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值