<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<style type="text/css">

			*{margin: 0;padding:0}

			html,body{

				width:100%;

				height:100%;

			}

			#container{

				height: 100%;

				display: -webkit-box;

				-webkit-box-orient: vertical;

			}

			header{

				width: 100%;

				height: 100px;

				background: darkcyan;

				-webkit-box-flex-group: 3;

			}

			footer{

				width: 100%;

				height: 100px;

				background: darkcyan;

				-webkit-box-flex: 1;

				-webkit-box-flex-group: 1;

			}

			section{

				width: 100%;

				height: 100px;

				background: #FFFFFF;

				-webkit-box-flex: 2;

				-webkit-box-flex-group: 1;

			}

		</style>

	</head>

	<body>

		<div id="container">

			<header></header>

			<section></section>

			<footer></footer>

		</div>

	</body>

</html>

旧的flex的更多相关文章

  1. CSS旧版flex及兼容

    × 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...

  2. 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能

    转载:https://blog.zengrong.net/post/1568.html 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能 今天在论坛上看到一篇文章:H ...

  3. css3 新旧伸缩盒的异同

    由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...

  4. flex盒子布局

    看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...

  5. 走进flex布局

    简介:flex 是一个CSS的display 属性中新添加一个值. 随着inline-flex的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 ...

  6. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

  7. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  8. Flex-box 学习

    .flex-cont{ /*定义为flexbox的“父元素”*/ display: -webkit-box; display: -webkit-flex; display: flex; /*子元素沿主 ...

  9. swf version 与flash player 对应关系

    2013-04-16更新:更新Flash Player 11.7/AIR 3.7正式版. 详细链接FlashPlayer 11.7详情 2013-03-10更新:更新Flash Player 11.6 ...

随机推荐

  1. uitableview分组的数据2中方式

    // // ViewController.m // tableviegroup // // Created by ganchaobo on 13-7-2. // Copyright (c) 2013年 ...

  2. #探究# HTTP长连接和短连接

    本文速读: HTTP协议与TCP/IP协议的关系 因TCP协议可靠,所以HTTP通常基于TCP实现 如何理解HTTP协议是无状态的 多次请求之间没有关联关系 什么是长连接.短连接? 每次请求都建立TC ...

  3. xfsdump命令使用

    一:使用xfsdump备份和恢复xfs文件系统 首先了解一下xfsdump的备份级别有以下两种,默认为0(即完全备份) 0                                    完全备 ...

  4. java 图片与文字生成PDF

    1.jar包:iText-2.1.5.jar 2.code: import java.awt.Color; import java.io.File; import java.io.FileNotFou ...

  5. fedora装机运行第一脚本

    博主原创: #!/bin/bash echo "更换源&更新源......" yum install wget -y yum install yum-fastestmirr ...

  6. linux之间文件传输（之scp）

    linux的scp命令 linux 的 scp 命令 可以 在 linux 之间复制 文件 和 目录: ==================scp 命令==================scp 可以 ...

  7. 【java】Java泛型

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  8. /proc 目录详细说明

    /proc路径详细: Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  9. JVM 入门三板斧

    一个JVM实例只存在一个堆内存,堆内存的大小是可以调节的.类加载器读取了类文件后,需要把类.方法.常变量放到堆内存中,保存所有引用类型的真实信息,以方便执行器执行,堆内存分为三部分: Young Ge ...

  10. Docker容器进入的4种方式（转）

    在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进入Docker容器比较常见的几种 ...