<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .main {

            position: absolute;

            left: ;

            top: ;

            background-color: aquamarine;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            width: %;

            height: %;

        }

        .top {

            height: 60px;

            width:%;

            background-color: red;

            text-align:center;

        }

        .container{

            width: %;

            background-color: gray;

            flex: ; /**占据所有剩余空间**/

            text-align:center;

            display: flex;

        }

        .left, .right{

            width:100px;

            background-color:green;

            //flex:1;/**想要3个div均等划分就开放此设置**/

        }

        .center{

            flex:;

        }

        .bottom {

            width: %;

            height: 60px;

            background-color: red;

            text-align:center;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="top">

            top

        </div>

        <div class="container">

          <div class="left">left</div>

          <div class="center">center</div>

          <div class="right">right</div>

        </div>

        <div class="bottom">footer</div>

    </div>

</body>

</html>

flex简单参考实例的更多相关文章

  1. Redis：安装、配置、操作和简单代码实例(C语言Client端)

    Redis:安装.配置.操作和简单代码实例(C语言Client端) - hj19870806的专栏 - 博客频道 - CSDN.NET Redis:安装.配置.操作和简单代码实例(C语言Client端 ...

  2. IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

    现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...

  3. ASP.NET MVC 4 插件化架构简单实现-实例篇

    先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集. 4.定义模板引擎的搜索路径. 5.在模板引擎的查找页面方 ...

  4. Linux简单程序实例（GNU工具链，进程，线程，无名管道pipe，基于fd的文件操作，信号，scoket）

    一, GNU工具链简介: (1)编译代码步骤: 预处理 -> 编译 -> 汇编 -> 链接: 预处理:去掉注释,进行宏替换,头文件包含等工作: gcc -E test.c -o te ...

  5. MVC 4 插件化架构简单实现实例篇

    ASP.NET MVC 4 插件化架构简单实现-实例篇   先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...

  6. 分布式搜索ElasticSearch构建集群与简单搜索实例应用

    分布式搜索ElasticSearch构建集群与简单搜索实例应用 关于ElasticSearch不介绍了,直接说应用. 分布式ElasticSearch集群构建的方法. 1.通过在程序中创建一个嵌入es ...

  7. 运用Unity实现依赖注入[结合简单三层实例]

    运用Unity实现依赖注入[结合简单三层实例] 一:理论部分 依赖注入:这是 Ioc 模式的一种特殊情况,是一种基于改变对象的行为而不改变类的内部的接口编程技术.开发人员编写实现接口的类代码,并基于接 ...

  8. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

  9. C# 简单线程实例

    1.简单线程实例 以及委托(同步委托.异步委托) using System; using System.Collections.Generic; using System.Linq; using Sy ...

随机推荐

  1. 2013.5.2 - KDD第十四天

    今天早上来了之后就处理语料,然后发现处理好后的gbk编码的语料在HPC上没法训,而utf8在上面训练可以.后来就让它在上面训着,学长还没来. 学长回来之后问他怎么回事,他说不应该,然后我们看了一下第一 ...

  2. 开发指南~小程序代码构成~JSON配置

    2.1 JSON 配置 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 2.1.1 一个例子 ​先看一个例子,打开开发工具的编辑器,在根目录下可以找到 app.j ...

  3. 微信小程序API~用户信息

    UserInfo 用户信息 属性 string nickName 用户昵称 string avatarUrl 用户头像图片的 URL.URL 最后一个数值代表正方形头像大小(有 0.46.64.96. ...

  4. RSA 加密 解密 (长字符串) JAVA JS版本加解密

    系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...

  5. 第三天Beta冲刺

    团队作业Beta冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 (1)掌握软件黑盒测试技术:(2)学会编制软件 ...

  6. C#调用一下CMD

    C#程序调用CMD执行命令   在windows环境下,命令行程序为cmd.exe,是一个32位的命令行程序,微软Windows系统基于Windows上的命令解释程序,类似于微软的DOS操作系统.输入 ...

  7. 大数相加和大数相乘以及打印从1到最大的n位数

    string add(string a, string b){ int nlength; int diff; if (a.size() > b.size()){ nlength = a.size ...

  8. Kubernetes 学习25 创建自定义chart及部署efk日志系统

    一.概述 1.我们说过在helm架构中有这么几个关键组件,helm,tiller server,一般托管运行于k8s之上,helm能够通过tiller server在目标k8s集群之上部署应用程序,而 ...

  9. YAML_18 ansible 判断和循环

    标准循环 模式一 - name: add several users user: name={{ item }} state=present groups=wheel with_items: - te ...

  10. learning java AWT 手绘窗口

    import java.awt.*;port java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import jav ...