萌新的HTML5 入门指南( 二 ) _html5

HTML5页面布局
常用的页面布局方式有很多种，比如
?最早的静态表格布局
?通过栅栏划分页面的流式布局
?根据屏幕大小自动调整内容的自适应布局
?融和流式布局和自适应布局的响应式布局
以上布局主要通过使用css中、和float属性相配合来实现，在确定位置以及清除浮动时，常常会遇到棘手问题（例如：垂直居中，屏幕适应）。
CSS3中提供了一种更简单的布局方式Flex布局（弹性布局）。
下面我们通过一个例子来展示Flex布局的易用性，下图是一个典型的单页应用样式，结构上分为， aside ，和main四部分。和自适应宽度， aside固定宽度并可收缩， main区域自动根据剩余空间填充。

文章插图
我们首先使用自适应布局来实现上图的结构
?HTML
"header">"container">"aside">"main">"footer">
?CSS

html,body {margin: 0;padding: 0;height: 100%;background: black;}.header, .footer{height:80px;background: white;}.container{height: CALC(100% - 160px);background: pink;padding: 10px 0;}.aside{width: 20%;height: 100%;float: left;background: gold;}.main{width: 80%; height: 100%;float: left;background: gray;}

页面分为上中下三部分，中间部分高度通过使用CALC计算，浏览器高度变化时自动调整。中aside为浮动元素，宽度20% 。main根据剩余宽度调整。
这样的布局方式存在一些问题，就是当、高度发生变化后，需要重新设置高度，另外如果中并列元素较多时，浮动难以控制。
接下来，我们看一下如何使用Flex布局实现上面的效果：
?html:

Welcome to HTML5 World!"designerContainer">
Copyright ? 2020 GrapeCity inc.

?css:

html, body{margin: 0;padding: 0;}body{height: 100vh;display: flex;flex-direction: column;}h1, h2, h3 {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-block-start: 0;margin-block-end: 0;padding: 15px;}.designerContainer{padding: 10px;flex: 1;display: flex;background: gray;}.designerAside{text-align: center;background: gold;}.designerMain{display: flex;flex: 1 100%;padding: 0 0 0 10px;background: pink;}

效果如下：
对比自适应布局，上面的代码有以下特点：
?页面使用HTML5语义化标签，页面各部分功能清晰。
?body设置高度 100vh ，这里使用了CSS3 的新单位vh ，即 view视窗高度， 100vh相当于html, body 高度100% ，同样还有vw代表视窗宽度
?body设置flex布局，方向从上到下叠放
? 设置flex 1 ，自动充满和之外剩余空间
?内部依旧flex布局，设置 flex 1 ，自动充满aside剩余空间
Flex兼容性注意事项：
l IE9不支持FLEX ，建议IE11
l和 IOS 需要加 --