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往往都可以几行命令 ...
随机推荐
- 张超超OC基础回顾02_成员变量（属性），局部变量，全局变量的区别
成员变量: 写在类声明的大括号中的变量, 我们称之为 成员变量(属性, 实例变量) 成员变量只能通过对象来访问 注意: 成员变量不能离开类, 离开类之后就不是成员变量 成员变量不能在定义的同时进行初始 ...
- spring aop自动代理注解配置之一
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 面试题:bootstrap栅格系统
Bootstrap是一个支持响应式的Css框架它提供了很多组件,如导航条,面板,菜单,form表单,还有栅格,而且他们这些都是支持响应式的,可以在各种设备上进行完美的展现.这里面我感觉最有价值的就是b ...
- CentOS集群自动同步时间的一种方法
CentOS集群自动同步时间的一种方法 之前有篇日志是手动同步时间的 http://www.ahlinux.com/os/201304/202456.html 之所以这么干,是因为我们实验室的局域网只 ...
- jQuery--加一行减一行
效果: 知识点: 克隆--clone() 追加--append() 移除--remove() 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...
- 在slam_gmapping中使用Log数据创建地图
本文介绍使用机器人记录的tf变换和激光扫描数据来建立2D地图.并在ROS的图形化模拟环境rviz中通过重新回放记录的数据作为机器人真实传感器采集的输入,来观测地图动态创建过程. 1.ROS gmapp ...
- 黑盒测试实践--Day2 11.26
黑盒测试实践--Day2 今天完成任务情况: 大家自主安装和学习Selenium软件 小尹给大家介绍学生信息管理系统的基本情况,有余力者搭建了相关环境 周末,休息 附录 小组基本情况介绍 人数:五人 ...
- redis过期key的清理策略
一,有三种不同的删除策略(1),立即清理.在设置键的过期时间时,创建一个回调事件,当过期时间达到时,由时间处理器自动执行键的删除操作. (2),惰性清理.键过期了就过期了,不管.当读/写一个已经过期的 ...
- QT背景
Qt是一个跨平台的C++图形用户界面应用程序框架.它为应用程序开发者提供建立基于window界面所需的功能. Qt是诺基亚公司的一个产品.1996年,Qt进入商业领域,已成为全世界范围内数千种成功的应 ...
- 编写高质量代码改善C#程序的157个建议——建议27：在查询中使用Lambda表达式
建议27:在查询中使用Lambda表达式 LINQ实际上是基于扩展方法和Lambda表达式的.任何LINQ查询都能通过扩展方法的方式来代替. var personWithCompanyList = f ...