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

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

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

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

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

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

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

<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>
扫码体验

"Flex弹性布局"组件:<flex-row><flex-col> —— 快应用组件库H-UI的更多相关文章
- flex弹性布局属性详解！
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- flex弹性布局心得
概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...
- java基础之Flex弹性布局、JSP错误处理以及Log4J
一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...
- flex弹性布局，好用
一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- flex弹性布局
Flex 布局教程:语法篇 原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者: ...
随机推荐
- kb4019990 补丁导致wpf无法启动异常
问题补丁:[Microsoft Update Catalog](https://www.catalog.update.microsoft.com/Search.aspx?q=kb4019990 ) ...
- appium移动自动化详解
1移动自动化简介 移动自动化就是通过代码来控制手机,模拟人的动作,对手机进行一些点击,输入等操作,那python代码如何能控制到手机呢?目前的思路应该是python代码->Appium-pyth ...
- Jenkins的制品管理
Jenkins的制品管理 制品是什么? 也叫产出物或工件.制品是软件开发过程中产生的多种有形副产品之一.广义的制品包括用例.UML图.设计文档等.而狭义的制品就可以简单地理解为二进制包.虽然有些代码是 ...
- 图解汉诺塔问题（ Java 递归实现）
汉诺塔简介 最近在看数据结构和算法,遇到了一个非常有意思的问题--汉诺塔问题. 先看下百度百科是怎么定义汉诺塔的规则的: 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候 ...
- Spring Cloud 系列之 Netflix Hystrix 服务容错
什么是 Hystrix Hystrix 源自 Netflix 团队于 2011 年开始研发.2012年 Hystrix 不断发展和成熟,Netflix 内部的许多团队都采用了它.如今,每天在 Netf ...
- jenkins-gitlab-harbor-ceph基于Kubernetes的CI/CD运用（二）
一张网图 因为我们使用了Docker in Docker技术,就是把jenkins部署在k8s里.jenkins master会动态创建slave pod,使用slave pod运行代码克隆,项目构建 ...
- Selenium系列（二） - 控制浏览器操作的详细解读
如果你还不想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识 ...
- java基础-Map
简介 Map是一种接口,实现类有 hashMap SortedMap是继承自Map的接口,实现类为TreeMap,在内部会对Key进行排序 遍历Map 使用for each循环遍历Map实例的keyS ...
- 算法学习 八皇后问题的递归实现 java版 回溯思想
1.问题描述 八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或 ...
- matplotlib命令与格式：参数配置文件与参数配置
转自 https://my.oschina.net/swuly302/blog/94805 自定义matplotlib Created Saturday 08 December 2012 5.1 ma ...