.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. eclipse新建maven项目：'Building' has encountered a problem. Errors occurred during the build.

    二.eclipse 新建maven 项目报错(因为没有配置maven环境) 1.问题: ① 出现的问题1: Could not calculate build plan:Plugin org.apac ...

  2. python prettytable 模块

    #coding:utf-8 # qianxiao996精心制作 from prettytable import PrettyTable x = PrettyTable(["名称", ...

  3. Redis快速入门：初识Redis

    [IT168 专稿]在之前的文章中介绍了<Redis快速入门:选择Key-Value Store>,今天给大家介绍Redis的入门知识.Redis是一个开源的使用ANSI C语言编写.支持 ...

  4. Prim算法求最小生成树

    首先在介绍这个算法之前我们要之明确一下什么是最小生成树的概念: 由 V 中的全部 n 个顶点和 E 中 n−1 条边构成的无向连通子图被称为 G 的一棵生成树,其中边的权值之和最小的生成树被称为无向图 ...

  5. 半吊子菜鸟学Web开发2 --JavaScript学习1

    JavaScript是一种类C的语言,对于我来说学起来还是蛮轻松的 1 输出 console.log(**); 相当于print console.assert(*);弹窗 2 变量 JS是动态变量 类 ...

  6. @Autowired 注解？

    @Autowired 注解提供了更细粒度的控制,包括在何处以及如何完成自动装配.它的用法和@Required一样,修饰setter方法.构造器.属性或者具有任意名称和/或多个参数的PN方法.

  7. springDataRedis忽略实体指定的属性

    如果是通过 RedisRepository定义的实体,可能存在想要忽略的属性,那么,就可以 使用 org.springframework.data.annotation.Transient 注解,就可 ...

  8. Spring-boot-菜鸟-配置-简介

    SpringBoot使用一个全局的配置文件,配置文件名是固定的: •application.properties •application.yml 配置文件的作用:修改SpringBoot自动配置的默 ...

  9. Java 进程和线程

    进程和线程 在并发编程中,有两个基本的执行单元:进程和线程.在Java编程语言中,通常并发编程主要与线程有关.但是进程也很重要. 计算机系统通常具有许多活动的进程和线程.即使在只有一个执行核心,因此在 ...

  10. hackgame2018_签到

    hackgame2018_签到 进入题目得到如下提示 尝试提交 发现这个输入框长度做了限制我们将前端js修改一下 然后提交以下这样就发现了flag这题比较简单--