.row {/*横*/
display: -webkit-box;//
display: -webkit-flex; /* Safari */
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.row-wrap {/*横不换行*/
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {/*列*/
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 100%;
}
.col-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 10%;
-moz-box-flex: 0;
-moz-flex: 0 0 10%;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}

.col-20 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-moz-box-flex: 0;
-moz-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}

.col-25 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-moz-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}

.col-33, .col-34 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-moz-box-flex: 0;
-moz-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}

.col-50 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-moz-box-flex: 0;
-moz-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}

.col-66, .col-67 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.6666%;
-moz-box-flex: 0;
-moz-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}

.col-75 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-moz-box-flex: 0;
-moz-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}

.col-80 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 80%;
-moz-box-flex: 0;
-moz-flex: 0 0 80%;
-ms-flex: 0 0 80%;
flex: 0 0 80%;
max-width: 80%;
}

.col-90 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 90%;
-moz-box-flex: 0;
-moz-flex: 0 0 90%;
-ms-flex: 0 0 90%;
flex: 0 0 90%;
max-width: 90%;
}
div {
margin-bottom: 20px;
height: 100px !important;
width: auto;
color: #fff;
font-size: 18px;
font-weight: bold;
}

.bg-r {
background: red;
}
.bg-b {
background: black;
}
.bg-y {
background: yellow;
}
.bg-g {
background: green;
}
.bg-w {
background: white;
}
.bg-p {
background: pink;
}
.positive-bg {
background-color: #387ef5; }

.positive-border {
border-color: #0c63ee; }

.calm, a.calm {
color: #11c1f3; }

.calm-bg {
background-color: #11c1f3; }

.calm-border {
border-color: #0a9ec7; }

.assertive, a.assertive {
color: #ef473a; }

.assertive-bg {
background-color: #ef473a; }

.assertive-border {
border-color: #e42012; }

.balanced, a.balanced {
color: #33cd5f; }

.balanced-bg {
background-color: #33cd5f; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端flex终极变态布局</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="xiaoye.css"></link>
</head>
<body>
<div class="row">
<div class="col bg-r"></div>
<div class="col bg-y">2</div>
<div class="col bg-b">3</div>
</div>
<div class="row">
<div class="col col-20 bg-r">20%</div>
<div class="col col-30 bg-y">30%</div>
<div class="col col-50 bg-b">50%</div>
</div>
<div class="row">
<div class="col col-10 bg-w">10%</div>
<div class="col col-20 bg-p">20%</div>
<div class="col col-70 bg-g">70%</div>
</div>
<div class="row">
<div class="col col-33 bg-r">33%</div>
<div class="col col-33 bg-y">33%</div>
<div class="col col-33 bg-b">33%</div>
</div>
<div class="row">
<div class="col col-25 bg-w">25%</div>
<div class="col col-25 bg-p">25%</div>
<div class="col col-50 bg-g">50%</div>
</div>
<!--切记！！！！！在添加col-xxx的时候 前面一定要有col，不然低端安卓有问题-->
</body>
</html>

flex 布局 自己做的demo的更多相关文章

  1. 微信小程序 View：flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. flex布局实例demo全解

    上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...

  3. flex布局demo

    flex布局 http://static.vgee.cn/static/index.html

  4. 详解CSS的Flex布局

    本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...

  5. 关于flex布局兼容

    (做个记录) 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 201 ...

  6. 三大Flex布局用法（转载）

    Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...

  7. flex布局大全 2019

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  8. flex布局大全

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  9. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

随机推荐

  1. ArcGIS Server 禁用/rest/services路径（禁用服务目录）

    ArcGIS Server服务目录(路径如:http://<hostname>:6080/arcgis/rest/services)默认可以不需要登陆直接打开.效果如下图. ArcGIS服 ...

  2. 时间模块 time 随机模块random os模块，sys模块

    时间模块  time #时间模块 import time #三种格式 #时间戳时间:是一个浮点数,以秒为单位,计算机用语 #结构化时间 :是一个元组 #用于中间转换 #格式化时间:str数据类型, 用 ...

  3. 『忘了再学』Shell基础 — 3、echo命令的介绍与使用

    目录 1.echo命令的作用 2.echo命令的基本用法 3.echo命令的-e选项用法 4.echo命令一些特殊用法 (1)输出字符带有字体颜色 (2)输出字符带有背景颜色 在讲Shell脚本之前, ...

  4. libpcap -学习1

    1.今天学到的最重要一点就是指定是否打开混杂模式(Promiscuous Mode),0表示非混杂模式,任何其他值表示混合模式.如果要打开混杂模式,那么网卡必须也要打开混杂模式,可以使用如下的命令打开 ...

  5. Java常见的垃圾收集器有哪些？

    守拙者_6a98关注 2020.04.11 22:06:31字数 2,135阅读 394 实际上,垃圾收集器( GC , Garbage Collector )是和具体 JVM 实现紧密相关的,不同厂 ...

  6. Scanner几个问题与正则简介

    Pre:最近做了头条的在线笔试,对Scanner输入的处理有些特殊,当时是一脸懵逼态,遂由此随笔(/@_@\),java小白,有错难免! 查了下Scanner的源码,没有头绪,但是其中用到了正则的知识 ...

  7. IDEA 常用快捷键操作

    自定义设置及查询: 操作路径:file-setting-Keymap-Editor actions 右击需要修改的action操作,或者右击Editor actions,选择添加Add Keyboar ...

  8. 有没有可能两个不相等的对象有有相同的 hashcode？

    有可能,两个不相等的对象可能会有相同的 hashcode 值,这就是为什么在 hashmap 中会有冲突.相等 hashcode 值的规定只是说如果两个对象相等,必 须有相同的 hashcode 值, ...

  9. Mybatis入门程序（一）

    1.入门程序实现需求 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户(二) 更新用户(二) 删除用户(二) 2.引入Mybatis所需 jar 包(Maven工程) < ...

  10. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2 "No such file or directory")

    /etc/init.d/mysql startmysql 没有启动参考 https://blog.csdn.net/sirobot/