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. hadoop搭建好，启动服务后，无法从web界面访问50070

    在hadoop完全分布式搭建好以后,从主节点启动正常,使用jps查看启动的进程,正常,在几个从节点上使用jps查看,显示正常,但从web上输入下面网址: http://主节点IP:50070 无法正常 ...

  2. Mybatis和Hibernate比较

    作者:乌拉拉链接:http://www.zhihu.com/question/21104468/answer/58579295来源:知乎著作权归作者所有,转载请联系作者获得授权. 1.开发对比开发速度 ...

  3. css 样式文字溢出显示省略号

    在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...

  4. Solidity智能合约升级解决方案

    https://blog.zeppelin.solutions/proxy-libraries-in-solidity-79fbe4b970fd

  5. 3.SELECT 语句

    SELECT 语句用于从表中选取数据. 结果被存储在一个结果表中(称为结果集). SQL SELECT 语法 SELECT 列名称 FROM 表名称 以及: SELECT * FROM 表名称 注释: ...

  6. Jmeter接口测试-新用户注册API

    新用户注册 新用户注册的接口是POST /register username/password/password_confirmation 该接口需要提供3个参数,分别是 username 用户名 p ...

  7. Convert HTML to PDF with New Plugin

    FROM:http://www.e-iceblue.com/Tutorials/Spire.PDF/Spire.PDF-Program-Guide/Convert-HTML-to-PDF-with-N ...

  8. C# static 字段初始值设定项无法引用非静态字段、方法或属性

    问题:字段或属性的问题字段初始值设定项无法引用非静态字段.方法 下面代码出错的原因,在类中定义的字段为什么不能用? public string text = test(); //提示 字段或属性的问题 ...

  9. .net 特性 Attribute

    public sealed class RemarkAttribute : Attribute { public string Remark { get; set; } // 构造函数 public ...

  10. 匿名函数和lamda表达式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...