<!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. VMware Linux系统克隆

    系统克隆 网卡设备无法识别 解决克隆虚拟机后网卡设备无法识别启动问题的方法 一.故障问题 从vmware workstation中克隆(clone)了一个CentOS 6的虚拟机,启动之后发现网卡没有 ...

  2. mysql 两张表字段模糊匹配--字符串拼接函数

    concat(A,B,C,...)  拼接字符串 例如concat('123','***','345')  =>123***345 SELECT concat( substr(t1.CODE, ...

  3. C# 4.0 新特性(.NET Framework 4.0 与 Visual Studio 2010 )

    一.dynamic binding:动态绑定 在通过 dynamic 类型实现的操作中,该类型的作用是不在编译时类型检查,而是在运行时解析这些操作.dynamic 类型简化了对 COM API(例如 ...

  4. attention speech recognition

    Attention:是一种权重向量或矩阵,其往往用在Encoder-Decoder架构中,其权重越大,表示的context对输出越重要.计算方式有很多变种,但是核心都是通过神经网络学习而得到对应的权重 ...

  5. MySQL UTF8 转为 utf8mb4

    https://mathiasbynens.be/notes/mysql-utf8mb4#utf8-to-utf8mb4 How to support full Unicode in MySQL da ...

  6. 2019/7/18 --1.<%@ include file=""%>与<jsp:include page=""/>两种方式的作用

    一.前言 身为一名coder有太多太多的知识点要去学,太多太多的东西要去记.往往一些小细节也就难免疏忽,但悲催的是多数困恼你的bug就是因为这些微不足道的知识点.我们又不是机器人,怎么可能什么都记得了 ...

  7. am335x using brctl iptables dhcpcd make multi wan & multi lan network（十五）

    构建多LAN口多WAN口动态网络 [目的] 在AM335X定制动态网络功能,如下所示,在系统当中有两个以太网口,有4G模块,有wifi芯片8188eu支持AP+STA功能. [实验环境] 1.  Ub ...

  8. Bzoj 2440: [中山市选2011]完全平方数(莫比乌斯函数+容斥原理+二分答案)

    2440: [中山市选2011]完全平方数 Time Limit: 10 Sec Memory Limit: 128 MB Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平 ...

  9. 2019 ACM-ICPC 西安全国邀请赛 E-Tree 树链剖分+线段树

    题意 给一颗带点权的树,三种操作 \(1~s~t\) 修改从1到s的路径上的所有点,\(a[i]=a[i]|t\) \(2~s~t\) 修改从1到s的路径上的所有点,\(a[i]=a[i]\& ...

  10. AtCoder Grand Contest 019 题解

    传送门 \(A\) 咕咕 int a,b,c,d,n,t; int main(){ scanf("%d%d%d%d%d",&a,&b,&c,&d,& ...