基于 flex 布局实现的三栏布局
我愿称之为史上最简单（实现简单、理解简单）的三栏实现。
为什么将 div.center 作为 div.container 的首个子元素？
为了其优先加载，div.center 中一般都是存放页面的主要内容。
主要功臣是属性 order、flex。
order 属性可以自定义元素的渲染位置顺序。
flex: 1; 使该元素占据元素的剩余空间。
div.container 也没有声明 width: 100% 那为什么 div.center 会自动撑开呢？
类似 div 这种块级元素，默认 width: auto;
对于普通块级元素，其具有充分利用可用空间的特性，即 fill-available。
此时，width: 100% 属于吃力不讨好的声明。
众所周知，默认：box-sizing: content-box。此时 width 直接作用于 content-box，若声明 width: 100%，那么 padding、boder、margin 怎么办？
当然可以再声明 box-sizing: border-box，对于此，其他坏处暂且不提，同样的效果，多两行代码。
更多 CSS 相关知识见 张鑫旭《CSS 世界》。
<!DOCTYPE html>
<html>
<head>
<meta charset
最低0.47元/天 解锁文章
1619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
