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往往都可以几行命令 ...
随机推荐
- subprocess模块和logging模块
主要内容: 一.subprocess模块 二.logging模块 1️⃣ subprocess模块 三种执行命令的方法 subprocess.run(*popenargs, input=None, ...
- Location - BOM对象
Location 对象 Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 例子 把用户 ...
- CSV Format
[CSV Format] The comma separated values format (CSV) has been used for exchanging and converting dat ...
- libevent 源码深度剖析十三
libevent 源码深度剖析十三 —— libevent 信号处理注意点 前面讲到了 libevent 实现多线程的方法,然而在多线程的环境中注册信号事件,还是有一些情况需要小心处理,那就是不能在多 ...
- Docker 学习笔记_安装和使用MongoDB
一.准备 1.宿主机OS:Win10 64 2.虚拟机OS:Ubuntu18.04 3.账号:docker 二.安装 1.搜索MongoDB镜像 ...
- SQL 数据排重,去掉重复数据 有用
.最大的错误: 在对数据排重的时候,首先想到的就是Distinct,虽然这很管用,但多数场合下不适用,因为通常排重后还要做进一步处理,比如对编号排重后要按日期统计等. 无法排重的Group by ...
- 34.UCASE() LCASE() 函数
UCASE() 函数 UCASE 函数把字段的值转换为大写. SQL UCASE() 语法 SELECT UCASE(column_name) FROM table_name SQL UCASE() ...
- Flask解决跨域
Flask解决跨域 问题:网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify. 然后ajax就报错:No 'Access-Control-Allow-Origi ...
- markdown的图片外链
markdown的图片用本地的很不方便,今天试用了一下七牛的服务,感觉很好用.推荐一下,免费的服务够用并且比较友好.
- Recyclerview添加头布局和尾布局,点击效果
简介: 本篇博客主要包括recyclerview添加多种布局以及添加头布局和尾布局,还有item点击事件 思路: 主要重写Recyclerview.Adapter中的一些方法 1.public int ...