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

最新推荐文章于 2024-06-07 17:39:43 发布
最新推荐文章于 2024-06-07 17:39:43 发布
阅读量3.7k 收藏 4
点赞数
分类专栏： 基础组件
Copyright 2020 h-ui.mobi
本文链接：https://blog.csdn.net/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';
    .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

快应用H-UI
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex弹性布局
weixin_57764814的博客
11-17 1697
1.启用弹性行为：使用display通用属性来创建一个flxbox容器，并将直属内部子元素转换为flex属性. 2.方向：浏览器预默认值下，使用.flex-row可设置子元素水平方向排版呈现，或者使用.flex-row-reverse可实现元素在水平上作反方向排列（右对齐、从右到左布局）。 3.使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。 ...
一篇文章弄懂Flex布局
qq_34345165的博客
12-03 1363
转载地址 https://www.cnblogs.com/echolun/p/11299460.html 1.flex-direction属性 取值：row(默认) | row-reverse | column | column-reverse 用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。 column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为
CSS-布局-flex
最新发布
weixin_40017062的博客
06-07 816
flex弹性布局
flex布局
过客如期的博客
05-30 414
一，什么是flex布局 1.flex布局代表弹性盒子，可用于自适应布局。 2.目前所有浏览器都支持flex布局 3.使用flex布局后，弹性盒子内的float无效。 二，flex布局特征 1.我们可以使用display：flex；display:-webkit-flex声明一个盒子为弹性盒子，盒子里的元素可称为项目。 2.在弹性盒子里默认有一条水平的轴线称之为主轴，还有一条垂直的轴线称为交叉轴。所有元素默认排列在主轴上。 三，容器上的属性 1.flex-dirction: row || row-rever
Re-Flex:可调整大小的Flex布局容器组件，用于高级React Web应用程序
05-02
Re-F | ex是我创建的基于React flex的布局组件库，因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示： import ...
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...
flex：快速词法分析器-用于C和C ++词法分析的扫描仪生成器
01-31
- Flex则是一个词法分析器生成器，它接受一种特定的输入格式——通常称为`.l`或`.ll`文件，其中包含了用户定义的正则表达式和对应的操作代码，然后生成C或C++代码来实现这个词法分析器。 2. **Flex文件结构**： -...
Bison-Flex-Calculator:使用Bison＆Flex的科学计算器，并在C语言中实现了其他功能
05-24
Bison-Flex计算器 CS任务-使用Bison＆Flex的科学计算器，并在C中实现了附加功能 功能性 遵循BODMAS规则的基本算术，例如4 *（3 + 2）= 20 标准功能（模，ceil，abs，floor） 对数函数（log2，log10） 触发功能...
bison&flex编译组件bfwizard-1.6
05-13
标题中的“bison&flex编译组件bfwizard-1.6”指的是一款基于Bison和Flex的编译工具，名为BFWizard的1.6版本。Bison是一个语法分析器生成器，它能根据形式文法文件（通常扩展名为.y）生成C或C++代码，用于解析符合...
flex的row和column居中
Mr_OOO的博客
04-16 9619
flex-direction:rowcss： 水平居中：style={ justify-content: center; }垂直居中：style={ align-items:center; }flex-direction:columncolumn的横竖排列和row是相反的css： 垂直居中：style={ justify-content: center; }水平居中：st
高级教程-flex
白山茶ι的博客
12-26 352
Document flex原理 能够说出flex盒子的布局原理 能够使用flex布局的常用属性 能够独立完成携程移动端首页案例 flex布局体验 flex布局原理 flex布局父项常见属性 flex布局子项常见属性 携程网首页案例制作 1.flex布局体验 布局方便适合移...
好用的前端flex布局，通用的flex布局CSS代码
SiuMu_的博客
07-01 1243
我的社交恐惧症，主要来自于，收入低。???   如果基础不是很好的话，前后端分离之后，我们或许会有一些这样的疑问：文件能不能用Json上传？，文件能不能和参数一起上传？，文件怎么下载?，等等一系列问题。今天我们就用一篇文章彻底搞懂前后端分离后有哪些上传与下载的方案。 ...
常用的flex布局css样式
l_yilan的博客
08-11 682
常用的flex布局css样式 flex布局我在微信小程序开发中用的比较多，不用考虑太多适配问题。 .flex{display: flex;display:-webkit-flex;} .flex-row{flex-direction: row;} .flex-col{flex-direction: column;} .flex-ai{align-items: center;} .flex-jc{justify-content: center;} /****主轴水平、垂直方向***/ .flex-rowc{d
谈谈Flex布局
珍妮的小罐君
02-10 918
作为前端开发人员来讲，页面布局是最重要的一步，而布局的传统解决方案，大多基于盒模型，依赖 display属性 + position属性 + float属性等等。对于某些特殊布局就非常不方便，比如，垂直居中就不是那么容易的实现； W3C在2009年提出了一种新的布局方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，大多数主流浏览器已经完全支持它，看下图：
Flex-伸缩布局-flex-常用标签
chengyan3170的博客
09-29 240
Flex-伸缩布局-flex-常用标签 .flex { display: -webkit-box; display: -webkit-flex; display: flex; } .flex-1 { -webkit-box-flex: 1; -webkit-flex: ...
display: flex; flex-wrap: wrap; flex-direction: row;
04-04
display: flex; 是CSS中的一个属性，用于创建一个弹性盒子（flex container），将其内部的元素（flex items）按照一定的规则进行布局。 flex-wrap: wrap; 是flex容器的一个属性，用于指定当flex items超出容器宽度时是否换行。wrap表示超出容器宽度时进行换行，不换行则会压缩flex items。 flex-direction: row; 是flex容器的一个属性，用于指定flex items的排列方向。row表示水平方向从左到右排列。 综上所述，display: flex; flex-wrap: wrap; flex-direction: row; 的意思是创建一个弹性盒子，其中的元素按照水平方向从左到右排列，并且当元素超出容器宽度时进行换行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值