flex 实例Demo
Flex 页面布局 很方便 快捷 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%
}
.col{
height: 100%;
background: #e3e3e3;
display: flex;
/* 正好与横向的属性设置相反 */
flex-direction:column;/* 将方向设置为垂直*/
justify-content: space-between;/* 两端对齐*/
align-items: center;/* 水平居中 */
} .head{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
background: #fff;
} .content{
width: 300px;
height: 400px;
background: green;
} .row-between{
width: 90%;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
} .logo{
width: 50px;
height: 30px;
line-height: 30px;
background: pink;
text-align: center;
color:#fff;
} button{
width: 100px;
height: 30px;
border:1px solid pink;
border-radius: 8px;
background: #fff;
} </style>
</head>
<body> <div class="col"> <div class="head"> 我是个放头像的地方 </div> <div class="content">sdfasfasdfasdfasdfasdfasdfsaddfasdfasdfasdfasdf dfasdfasdfsaddfasdfasdfasdf</div> <div class="row-between"> <button>按钮一</button> <div class="logo"> logo </div> <button>按钮二</button> </div> </div> </body>
</html>
flex-1
按钮二
flex 实例Demo的更多相关文章
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- Android ListFragment实例Demo（自己定义适配器）
上一篇文章介绍了ListFragment,当中的ListView并没有自己定义适配器,实际上在实际开发中常会用到自己定义适配器,是实现更复杂的列表数据展示. 所以这篇文章添加了自己定义适配器.来进行L ...
- 3 weekend110的hadoop中的RPC框架实现机制 + hadoop中的RPC应用实例demo
hadoop中的RPC框架实现机制 RPC是Remotr Process Call, 进程间的远程过程调用,不是在一个jvm里. 即,Controller拿不到Service的实例对象. hadoop ...
- mybatis 学习笔记 -详解mybatis 及实例demo
快速入门1 要点: 首先明白mybatis 是什么 这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. 首先, ...
- Android之SlideMenu实例Demo
年末加班基本上一周都没什么时候回家写代码,回到家就想睡觉,周末难得有时间写个博客,上次写了一篇关于SlideMenu开源项目的导入问题,这次主要讲讲使用的问题,SlideMenu应用的广泛程度就不用说 ...
- Android微信分享功能实例+demo
Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- flex布局实例demo全解
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...
- flex实例（阮一峰）
Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令 ...
随机推荐
- SQL和NoSQL
SQL和NoSQL 目前的数据库系统非常多,有传统的关系型的数据库系统(又被称为SQL数据库系统),有最近几年流行起来的NoSQL数据库系统.其中NoSQL数据库系统又分为很多种不同的类型,根据各个系 ...
- objc变量的获取
[objc变量的获取] C++成员变量通过偏移来寻找,速度极快.But Objc中的变量通过方法调用来寻找,方法首先根据变量名,找到ivar_t,然后在ivar_t对象中取出偏移,再用此偏移来取值(这 ...
- solr facet查询及solrj 读取facet数据（相当有用）
原文出自:http://www.coin163.com/java/docs/201310/d_3010029802.html 一. Facet 简介 Facet 是 solr 的高级搜索功能之一 ...
- 数据结构》关于差分约束的两三事（BZOJ2330）
差分约束,主要用来解决数学中的线性规划问题,通过差值与两个未知数可以转化为单源最长路问题(或负值最短路). 当有一个式子为x1-x2>=a时,我们可以建边,这条边设定为x1比x2大等a(或x2比 ...
- centos 搭建docker环境
我有一台便宜的腾讯云服务器,当然配置自然也是最低的,只是用来平常玩一玩,学习的用处,下面介绍一下我在上面搭建docker的心得,共勉一下. 安装与配置 Docker 安装 Docker Docker ...
- Eclipse右击jsp没有运行选项
maven项目低级错误,没有更新maven资源库.....更新后就运行起来了
- jQuery--基础知识速查表
一.jQuery选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的 ...
- Luogu 3594 [POI2015]WIL-Wilcze doły
简单题. 考虑没有修改数字的条件的限制,我们直接用双指针扫描就可以计算出答案了. 然后考虑加入修改数字的条件,只要用单调队列维护出当前两个指针表示的区间中长度为$d$的一段区间的最大值,用总和减掉这个 ...
- 智能IC卡与终端（读卡器）之间的传输协议
1.有两种协议 T=0,异步半双工字符传输协议 T=1,异步半双工块传输协议 终端一般都支持这两种协议,IC卡可以选择支持其中的一种.(因为终端可能需要面对各种类型的卡片,所以必须两种协议都支持,而卡 ...
- initWithFrame 和 initWithCoder 区别？
当我们所写的程序里用代码创建控制视图内容,需要调用initWithFrame去初始化 - (id)initWithFrame:(CGRect)frame { if (self =[superinitW ...