<!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. JDBC连接方式有哪几种

    2011-05-10 目前比较常见的JDBC驱动程序可分为以下四个种类:  (1)JDBC-ODBC桥加ODBC驱动程序  JavaSoft桥产品利用ODBC驱动程序提供JDBC访问.注意,必须将OD ...

  2. Swift3 获取当前连接WIFI名称

    1.导入库 import SystemConfiguration import SystemConfiguration.CaptiveNetwork 2.方法 /// 获取wifi名称 /// /// ...

  3. Java 过滤特殊字符的 正则表达式

    Java正则表达式学习: 因为正则表达式是一个很庞杂的体系,此例仅举些入门的概念,更多的请参阅相关书籍及自行摸索. \\ 反斜杠 \t 间隔 ('\u0009') \n 换行 ('\u000A') \ ...

  4. Ubuntu菜鸟入门（十四）—— 设置root密码

    sudo su - 输入你的账户的密码 passwd 输入新的root密码 再次输入新的root密码

  5. 【MySQL】MySQL的约束

    在开始之前,笔者介绍一下笔者使用的数据库版本为5.7.所有的关系型数据库都支持对数据表使用约束,通过约束可以更好的保证数据表里数据的完整性.约束是在表上强制执行的数据校验,约束主要用于保证数据库里数据 ...

  6. 【SqlServer】SqlServer中Alter语句的使用

    在修改Sql Server表结构时,常用到Alter语句,把一些常用的alter语句列举如下. 1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alte ...

  7. 【Struts2】SSH如何返回JSON数据

      在开发中我们经常遇到客户端和后台数据的交互,使用比较多的就是json格式了.在这里以简单的Demo总结两种ssh返回Json格式的数据 项目目录如下 主要是看 上图选择的部分 WebRoot里面就 ...

  8. 【Spring】Spring框架如何集成Hibernate框架

    下面个整理一下hibernate和Spring框架的结合. 首先是引入hibernate框架的包.Spring框架的包.数据库驱动包. User.java文件 package cn.shop.bean ...

  9. jquery ajax 回调函数的值alert出来[object Object] 解决方法

    $("#activity_project").change(function(){ var pro=$("#activity_project").val(); ...

  10. Redis踩过的坑

    现象:在使用redis云提供的redis服务后,经常出现connect timeout: redis.clients.jedis.exceptions.JedisConnectionException ...