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

随机推荐

DDOS防御----CENTOS 内核TCP参数优化
0x01 环境 attact作为攻击发起方,安装有hping server作为被攻击方,修改内核TCP参数.使用操作系统CENTOS7 0x02 步骤一.发起攻击修改TCP最大SYN连接数使用a ...
dedecms 5.7 任意前台用户修改漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．点击新建项目按钮,弹出对画框中选择(C:\ ...
python练习册每天一个小程序第0013题
# -*-coding:utf-8-*- ''' 题目描述: 用 Python 写一个爬图片的程序,爬这个链接里的日本妹子图片 :-) 地址: http://tieba.baidu.com/p/21 ...
C++设计模式 - 命令模式（Command）
行为变化模式在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...
async-validator 源码学习笔记（五）：Schema
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...
netcore后台任务注意事项
开局一张图,故事慢慢编!这是一个后台任务打印时间的德莫,代码如下: using BackGroundTask; var builder = WebApplication.CreateBuilder() ...
Docker提交镜像-数据卷-可视化
在熟悉完Docker的安装及基本命令使用之后,我们开始学习下Docker的进阶操作:包括但不限于新建Docker镜像,数据卷的挂载,以及Docker的可视化等. Docker提交镜像启动镜像我们先 ...
MySQL使用日期列作为UNIQUE索引
https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_extract https://dev.my ...
JavaScript对不同数据结构的常见循环
var obj1 = { title : 'tom and jetty', author : 'pecool' } function Book(){} Book.prototype.price = 2 ...
redis支持哪些数据类型？redis命令大全
一.redis支持的数据类型 1)String 常用命令:set/get/decr/incr/mget等: 应用场景:String是最常用的一种数据类型,普通的key/value存储都可以归为此类: ...

flex 布局 自己做的demo

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

随机推荐

热门专题

flex 布局自己做的demo

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