<!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. css详解4

    1.固定定位 固定定位,页面内容多,页面滚动起来,才能看到固定定位效果. 比如下面这个,随之滚动条滚动它一直在右边.比如固定导航栏,小广告,回到顶部,应用在这些地方.一直固定位置不变的. 首先让页面能 ...

  2. Windows 远程访问 ubuntu 16 lts

    remote access ubuntu 使用安装使用vncserver (除非必要,不要使用图形界面,底层码农真的应该关心效率) $ sudo apt-get install vncsever wi ...

  3. 关于使用scipy.stats.lognorm来模拟对数正态分布的误区

    lognorm方法的参数容易把人搞蒙.例如lognorm.rvs(s, loc=0, scale=1, size=1)中的参数s,loc,scale, 要记住:loc和scale并不是我们通常理解的对 ...

  4. P2756 飞行员配对方案问题[二分图最大匹配]

    题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中,每一名 ...

  5. SQl Server 数据库多表连接

    [缘由] 为了防止数据的冗余,我们会将数据库中表进行拆分,这样就产生了多张表,表与表之间通过主外键关联,但这样又造成了我们查找和修改的困难,如何进行多表之间的查找呢? 我们将一个查询同时设计两个或两个 ...

  6. test20190729 夏令营NOIP训练14

    40+100+0=140. 基因光线 黑大帅统治古古怪界后,一直在玩一种很奇葩的游戏.在一个二维平面上,他先复制了n个小A,把他们放在不同的位置,然后射出一条ax+by+c=0的基因光线,宽度为d,即 ...

  7. idea Mapper.java中快速生成@Param注解

    1.鼠标悬浮到方法后 2.Ctrl+Enter打开操作列表 3.选择[Mybatis] Generate @Param自动生成@Param() 4.说明:@Param("参数名") ...

  8. go设置使用多少个cpu

    package main import ( "fmt" "runtime" ) func main() { n := runtime.NumCPU() fmt. ...

  9. 比较ping,tracert和pathping等命令之间的关系

    无论你是一个网络维护人员,还是正在学习TCP/IP协议,了解和掌握一些常用的网络测试命令将会有助于您更快地检测到网络故障所在,同时也会有助你您了解网络通信的内幕. 下面我们逐步介绍几个常用的命令: 1 ...

  10. php之大文件断点续传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...