html5弹性,html5弹性布局例子

html5的弹性盒子是干吗用的

flex布局。虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。

相关问答

Q1: HTML5到底是什么？有人给新手指点一下吗？

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS 3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。

HTML5的技术组成

1、脱机功能

HTML5透过JavaScript提供了数种不同的脱机储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。

WebStorage: 比 Cookies 更大、更有弹性的的储存

Web SQL Database: 本地端的SQL数据库

Indexed DB: Key-value 的本地数据库

Application Cache: 将部分常用的网页内容cache起来。课课家HTML5全能开发视频教程

2、WEB开发

HTML 和 CSS：开发网站，

你第一件要知道的事情就是HTML(网页就是由它组成的)和CSS(一种让外观更好看的样式标记)。

HTML 和 CSS 并不是编程语言—它们只是页面的结构和样式信息。 然而，在开始开发web应用程序之前你必须要学会如何手工的编写简单的HTML和CSS，web页面是任何webapp的前端显示部分。

这个HTML 指导是你入手的好地方。

JavaScript:当你可以通过HTML和CSS构建一个静态页面后，事情就开始变得有趣了—因为

到了该学JavaScript的时候了。 JavaScript是一种web浏览器上的编程语言，它的魔力就是能

在页面里制造一些动态效果。

JavaScript可以做bookmarklets,Greasemonkey脚本, 和Ajax, 所以它是web上各种好东西的关

于因素。

3服务器端脚本

一旦你学会了网页里的知识，你就要开始对它添加一些动态服务器操作—为了实现这些，你需要把目光转移到服务器端脚本语言，例如PHP, Python, Perl, 或 Ruby。

举个例子，如果想要制作一个网页形式的联系方式表单，根据用户的输入发送邮件，你就需

要使用服务器端脚本来实现。 像PHP这样的脚本语言可以让你跟web服务器上的数据库进行

沟通，所以如果你想搭建一个用户可以登录注册的网站，这样的语言正是你需要的。

5web APIs

API (应用层序编程接口)是指不同的软件之间相互交换的程序途径。课课家HTML配合Dreamweaver学习网页布局视频教程

例如，如果你想在你的网站上放一个动态的地图，你可以使用Google Map，

而不需要开发自己的地图。The GUGE Maps API可以轻松的让你通过JavaScript在程序中引入一个地图到你的页面上。

几乎所有的现代的你所知道的和喜爱的web服、务都提供了API，

通过这些API你可以获取到他们的数据和小工具，在你的应用程序里就可以使用这些交互过来的东西了，

通过API把其他web应用集成到你的web应用里是现在富web开发的前沿地带。

每个优、秀的主、流的web服、务API都附带有完整的文档和一些快速入手的指导。

Q2: html5弹性盒子模型宽度设置问题

解决办法，CSS代码修改如下：

#col2{ 

  background:#F63;

  box-flex:1;

  -webkit-box-flex:1;

  -moz-box-flex:1;

  width: 0%;           /* 加上这行代码 */

} 

#col3{ 

  background:#690;

  box-flex:3;

  -webkit-box-flex:3;

  -moz-box-flex:3;

  width: 0%;           /* 加上这行代码 */

}

所有需要按照比例分解的列，都加上 width: 0%; 已经有固定值的列不需要加，原理不懂。

反正这个应该是CSS3新属性  box-orient  没有完善的原因。