flex 布局 自己做的demo
.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的更多相关文章
- 微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- flex布局实例demo全解
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...
- flex布局demo
flex布局 http://static.vgee.cn/static/index.html
- 详解CSS的Flex布局
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...
- 关于flex布局兼容
(做个记录) 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 201 ...
- 三大Flex布局用法（转载）
Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...
- flex布局大全 2019
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- flex布局大全
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
随机推荐
- UIautomatorviewer连接设备报错Unexpected error while obtaining UI hierarchy
先来看下现象哈,点击sdk/tools下uiautomatorviever.bat,点击连接设备的图标,本以为就这么简单,那你就错了: 是不是看到这个瞬间心情就不好了,那么我们该怎么解决这个问题呢,归 ...
- 使用systemd-analyze 工具来分析各个服务进程的启动性能
systemd-analyze是一个分析启动性能的工具,用于分析启动时服务时间消耗.默认显示启动是内核和用户空间的消耗时间:使用systemd-analyze plot > boot.svg生成 ...
- 一个故事看懂CPU的SIMD技术
好久不见,我叫阿Q,是CPU一号车间的员工.我所在的CPU有8个车间,也就是8个核心,咱们每个核心都可以同时执行两个线程,就是8核16线程,那速度杠杠滴. 我所在的一号车间,除了负责执行指令的我,还有 ...
- S7-1200在博途V16中新建数据块（DB）
硬件环境: S7-1200 CPU V4.4(6ES7 212-1AE40-0XB0) 软件环境: (1)Windows 10 Professional SP1 64位 (2)STEP7 V16 SP ...
- CF375E Red and Black Tree(线性规划)
CF375E Red and Black Tree(线性规划) Luogu 题解时间 很明显有一个略显复杂的 $ n^3 $ dp,但不在今天讨论范围内. 考虑一些更简单的方法. 设有 $ m $ 个 ...
- 你知道 Kafka 是如何做到消息的有序性？
kafka 中的每个 partition 中的消息在写入时都是有序的,而且单独一个 partition 只能由一个消费者去消费,可以在里面保证消息的顺序性.但是分区之间的消息是不保证有序的.
- Java语言的特点有哪些？
1.简单 Java最初是为对家用电器进行集成控制而设计的一种语言,因此它必须简单明了.Java语言的简单性主要体现在以下三个方面: 1) Java的风格类似于C++,因而C++程序员是非常熟悉的.从某 ...
- redis 使用详解
前戏: 又到了最喜欢的前戏部分,这个前戏可能有点长: Nosql和sql的区别 存储结构与mysql这一种关系型数据库完全不同,nosql存储的是KV形式 应用场景不同,sql支持关系复杂的数据查询, ...
- C语言对源程序处理的四个步骤：预处理、编译、汇编、链接——预处理篇
预处理 1)预处理的基本概念 C语言对源程序处理的四个步骤:预处理.编译.汇编.链接. 预处理是在程序源代码被编译之前,由预处理器(Preprocessor)对程序源代码进行的处理.这个过程并不对程序 ...
- 如何解决Ubuntu下的“E: Unable to correct problems, you have held broken packages.”的问题. aptitude
今天安装build-essential时出现了以下问题,这属于包的依赖. 解决方案: 1,sudo apt-get install aptitude:完成aptitude命令安装 2,sudo apt ...