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>

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

随机推荐

centos根目录扩容
一.扫描磁盘若已在虚拟机增加了磁盘且没看到磁盘运行下面的命令来查找系统中所有的主机总线编号: # ls /sys/class/scsi_host 得到主机总线编号后,运行以下命令来发现新的磁盘: ...
Knife4j 注解详谈
Controller层添加注解 @Api:用于类:表示标识这个类是swagger的资源属性名称数据类型默认值说明 value String "" 字段 ...
Python 远程开发环境部署与调试
一.下载相应开发工具 Pycharm :下载地址二.部署开发机一般在工作过程中,开发环境并不是本地环境,而是指在开发机:因为,有很多依赖本地部署非常麻烦,而开发机中则内置了很多相关的服务三.代 ...
error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数。。。使用
一,问题描述 MSVCRTD.lib(crtexew.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainCRTStartup 中被引 ...
java常用方法集合
1.获取当前日期 // 获取当前日期 public Date getDate(int num) { Calendar cal = new GregorianCalendar(); cal.setTim ...
hadoop 分布式系统与Hadoop MapReduce
Hadoop分为两部分 Hadoop MapReduce和Hadoop分布式文件系统 1分布式系统由Master Node 和多台 slave Node组成. 1.1MasterNode Master ...
BootstrapBlazor 智能生成神器（一）AutoGenerateColumnAttribute 特性介绍
原文连接:https://www.cnblogs.com/ysmc/p/16074645.html BootstrapBlazor 官网地址:https://www.blazor.zone 介绍 Bo ...
什么是Viewport Meta（width详解）及在手机上的应用
viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...
canvas元素内容生成图像文件
准备工作想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canv ...
Android Studio连接SQLite数据库与SQLite Studio实时同步的实现
最近学习用到了android开发连接数据库这一块,发现连接成功后,都要先访问安卓项目的数据库路径data/data/项目/databases,然后把对应的db文件拷出来,再在SQLite的可视化工具中 ...

flex 布局 自己做的demo

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

随机推荐

热门专题

flex 布局自己做的demo

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