1.   Flex  页面布局 很方便  快捷  
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>flex-1</title>
  8. <style type="text/css">
  9.         *{
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.        body,html{
  14.       height: 100%
  15.      }
  16.       .col{
  17.       height: 100%;
  18.       background: #e3e3e3;
  19.       display: flex;
  20.       /* 正好与横向的属性设置相反 */
  21.       flex-direction:column;/* 将方向设置为垂直*/
  22.       justify-content: space-between;/* 两端对齐*/
  23.       align-items: center;/* 水平居中 */
  24.      } .head{
  25.       width: 200px;
  26.       height: 60px;
  27.       line-height: 60px;
  28.       text-align: center;
  29.       background: #fff;
  30.      } .content{
  31.       width: 300px;
  32.       height: 400px;
  33.       background: green;
  34.      } .row-between{
  35.       width: 90%;
  36.       margin-bottom: 10px;
  37.       display: flex;
  38.       justify-content: space-between;
  39.     } .logo{
  40.       width: 50px;
  41.       height: 30px;
  42.       line-height: 30px;
  43.       background: pink;
  44.       text-align: center;
  45.       color:#fff;
  46.     } button{
  47.       width: 100px;
  48.       height: 30px;
  49.       border:1px solid pink;
  50.       border-radius: 8px;
  51.       background: #fff;
  52.     } 
  53.  
  54.     </style>
  55. </head>
  56. <body>
  57.  
  58.       <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>
  59.  
  60. </body>
  61. </html>

flex-1

我是个放头像的地方
sdfasfasdfasdfasdfasdfasdfsaddfasdfasdfasdfasdf dfasdfasdfsaddfasdfasdfasdf
按钮一

logo

按钮二

flex 实例Demo的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. Android ListFragment实例Demo（自己定义适配器）

    上一篇文章介绍了ListFragment,当中的ListView并没有自己定义适配器,实际上在实际开发中常会用到自己定义适配器,是实现更复杂的列表数据展示. 所以这篇文章添加了自己定义适配器.来进行L ...

  3. 3 weekend110的hadoop中的RPC框架实现机制 + hadoop中的RPC应用实例demo

    hadoop中的RPC框架实现机制 RPC是Remotr Process Call, 进程间的远程过程调用,不是在一个jvm里. 即,Controller拿不到Service的实例对象. hadoop ...

  4. mybatis 学习笔记 -详解mybatis 及实例demo

    快速入门1 要点: 首先明白mybatis 是什么 这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. 首先, ...

  5. Android之SlideMenu实例Demo

    年末加班基本上一周都没什么时候回家写代码,回到家就想睡觉,周末难得有时间写个博客,上次写了一篇关于SlideMenu开源项目的导入问题,这次主要讲讲使用的问题,SlideMenu应用的广泛程度就不用说 ...

  6. Android微信分享功能实例+demo

    Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...

  7. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  8. flex布局实例demo全解

    上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...

  9. flex实例（阮一峰）

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令 ...

随机推荐

  1. 强大的HTML5开发工具推荐

    HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silver ...

  2. Spring MVC的配置

    一.添加依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>sprin ...

  3. solrserver实例化

    以下是httpClient实例化方式,需要tomcat运行Solr服务 1.ConcurrentUpdateSolrServer实例化SolrServer,该类实例化多用于更新删除索引操作 Concu ...

  4. 用rand5()生成rand(n)

    问题:有函数rand5(),它能够等概率生成[0,5)之间的整数.由rand5()构造rand(n)使其能够等概率生成[0,n)之间的整数. 思路1:有rand5()先生成等概率生成0和1的rand0 ...

  5. SQLSERVER索引在什么情况下会失效

    索引并不是时时都会生效的,比如以下几种情况,将导致索引失效: 如果条件中有or,即使其中有条件带索引也不会使用(这也是为什么尽量少用or的原因) 注意:要想使用or,又想让索引生效,只能将or条件中的 ...

  6. day63-webservice 03.解析cxf提供的例子

    Path配置: C:\Program Files (x86)\ScanSign;E:\app\zhongzh\product\11.2.0\dbhome_1\bin;D:\app\zhongzh\pr ...

  7. SpringAOP02 自定义注解

    1 自定义注解 1.1 创建自定义注解 从java5开始就可以利用 @interface 来定义自定义注解 技巧01:注解不能直接干扰程序代码的运行(即:注解的增加和删除操作后,代码都可以正常运行) ...

  8. Python 网络爬虫 009 (编程) 通过正则表达式来获取一个网页中的所有的URL链接，并下载这些URL链接的源代码

    通过 正则表达式 来获取一个网页中的所有的 URL链接,并下载这些 URL链接 的源代码 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 ...

  9. JS 换行写法

    var populatePullUpHtml = function (id) { var html = '<div id="' + id + '" class="' ...

  10. 一个简单的tcp代理实现

    There are a number of reasons to have a TCP proxy in your tool belt, bothfor forwarding traffic to b ...