标签：flex 面试 padding lex 元素 bfc ges asc 认知
看到这张图相信大多数人都很熟悉，这曾经是一种经典的布局方式，一道经典的面试题，但是随着岁月的流转，时光的交替（颇有一种“天下风云出我辈，一入江湖岁月催”的感慨，哈哈），它一步步逐渐退出了历史舞台，不过在经典，总是有它经典的含义在里面，今天笔者就尝试站在自己认知范围内，重新诠释了下经典，实现的手段则是用了各种可能的方式实现这一经典布局：
1、基于BFC的实现
.layout1 {
height: 100px;
overflow: hidden
}
.layout1 .l {
height: 100%;
width: 100px;
float: left;
}
.layout1 .m {
height: 100%;
margin: 0 200px 0 100px;
}
.layout1 .r {
height: 100%;
width: 200px;
float: right;
}
<div class=‘layout1‘>
<div class=‘l‘></div>
<div class=‘r‘></div>
<div class=‘m‘>layout1</div>
</div>
图中的第一个行就是基于此方式实现的，原理很简单，利用浮动元素脱离文档流的特性，左边的左浮动，右边的有浮动，简单粗暴。
2、圣杯布局
.layout2 {
height: 100px;
overflow: hidden;
padding: 0 200px 0 100px;
}
.layout2 .m {
float: left;
width: 100%;
height: 100%;
}
.layout2 .l {
float: left;
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
}
.layout2 .r {
width: 200px;
margin-left: -200px;
float: left;
position: relative;
right: -200px;
}
<div class=‘layout2‘>
<div class=‘m‘>layout2</div>
<div class=‘l‘></div>
<div class=‘r‘></div>
</div>
为了保证dom元素的尽快展示，而将最重要的元素放在最前解析，优化用户体验，使用负margin和相对定位调整左右元素位置，使用大容器的padding作为调整空间的hack，十分经典的手法；
3、双飞翼布局
.layout3 {
height: 100px;
overflow: hidden;
}
.layout3 .m-wrap {
width: 100%;
float: left;
height: 100%;
}
.layout3 .m {
margin: 0 200px 0 100px;
}
.layout3 .l {
float: left;
width: 100px;
margin-left: -100%;
}
.layout3 .r {
float: left;
width: 200px;
margin-left: -200px;
}
<div class=‘layout3‘>
<div class=‘m-wrap‘>
<div class=‘m‘>layout3</div>
</div>
<div class=‘l‘></div>
<div class=‘r‘></div>
</div>
与之前的方式基本一致，唯一的不同是添加了一个标签，而没有依赖根容器做hack
4、flex实现
.layout4 {
display: flex;
height: 100px;
}
.layout4 .l {
flex: 0 0 auto;
width: 100px;
}
.layout4 .m {
flex: 1 1 auto;
}
.layout4 .r {
flex: 0 0 auto;
width: 200px;
}
<div class=‘layout4‘>
<div class=‘l‘></div>
<div class=‘m‘>layout4</div>
<div class=‘r‘></div>
</div>
实现十分简单，利用伸缩盒模型的特性，只需要开启中间元素的flex-grow（为了保证缩小时的正常显示笔者还开启了flex-shrink）就能个很轻易的实现这种布局，不过为了美观，笔者并没有贴上兼容性的代码。
想来所有方式似乎都已穷举？其实不然，还有去年刚出台的新规则css-grid可以一试，于是
5、css grid
.layout5 {
height: 100px;
display: grid;
grid-template-columns: 100px 1fr 200px;
}
<div class=‘layout5‘>
<div class=‘l‘></div>
<div class=‘m‘>layout5</div>
<div class=‘r‘></div>
</div>
可以看到，基于css grid的实现是最为便捷的，基于不需要操作grid item，只需要设置容器就可以轻易实现，不过由于是新事物，所以兼容性比较差。
也难怪这是一种经典的布局，几乎所有新的布局方式都是很友好的在支持它，从蛮荒时代的要使用各种hack手段来实现，到现代的轻而易举的实现，也足见其在css发展中的重要地位，现在想来也确实，css3之前的css更多的像是一种工具式的语言，它没有任何优雅的特性，了无生趣，而到了css3时代，无论从性能上的优化，工程上的提高，都是可圈可点的。
当然，类似经典的实现在css中还有很多，例如各种垂直居中的方法，与js更新换代的方式不同，旧的技术不断被新技术替换，而在css领域，这种返古现象却经常发生，当然也和浏览器厂商、各个平台，复杂的兼容性场景有关，但是其中蕴含的思想就像jQuery那种设计理念，却不会随着岁月的流逝而过时，反而在特定的时间上，更是弥足珍贵的。
标签：flex 面试 padding lex 元素 bfc ges asc 认知
原文地址：http://www.cnblogs.com/mfoonirlee/p/6986953.html
