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

最新推荐文章于 2025-02-26 10:33:36 发布

快应用H-UI

最新推荐文章于 2025-02-26 10:33:36 发布

阅读量3.8k

点赞数

分类专栏：基础组件

本文链接：https://blog.youkuaiyun.com/weixin_41324043/article/details/105305417

版权

-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';