我不知道什么是三栏布局

由于入行较晚,对于浮动特性和定位特性经验使用不多,所以,就不使用了。🤭 Google了一下圣杯布局、双飞翼布局以后,看得有点懵逼。 不过还是用Flex特性实现一个不知道是什么布局的布局吧🌝

首先是HTML骨架,我们一共分三个大部分

  • HEADER: 头部
  • CONTENT: 中间主体区域
  • FOOTER: 底部

👆 上面的代码里,将main标签放在nav标签、aside标签前, 原因是在实际的项目中,main标签包含的内容更重要, 而左侧和右侧的内容大多是广告或者是导航栏。

CSS可以仔细说一下,首先给类名为container的元素设置display:flex;让其成为弹性容器,接着我们通过设置flex-direction: column;把主轴的方向改变为竖直方向,因为我们的三大块确实是从上到下排列的。紧接着给container元素设置min-height:100vh让其高度最小的情况也是浏览器的高度。

我们的需求是Header和Footer高度固定,中间的主体区域(也就是类名为content的元素),占据剩下的所有空间。 所以我们给了类名为content的元素设置flex-grow: 1,flex-grow的特性的效果是当弹性容器内还有剩余空间,则根据flex-grow的比例将剩余空间分配给子元素们,我们现在只给了类名为content的元素这个属性,那么它便能撑开剩余空间。

外面的部分处理完了,接着实现类名为content的元素里的三栏布局效果。既然flex这么好用,我们就继续利用flex来解决这个问题,同理,让中间的元素(main标签)拥有flex-grow:1;属性,使得它可以占据剩下的所有空间,达到左右两栏宽度固定,中间宽度自适应的效果。但请注意,我们的中间元素在HTML结构中在最前面, 所以需要给nav标签一个order: -1;改变nav标签的顺序,让它成为最左边的元素。

写在最后,兼容性的问题会一直存在,我们也不得不解决,这种被动的感觉着实不好,但我认为把大力气放到解决兼容性上面,似乎本末倒置。可谁让韭菜一波又一波呢,不解决就没饭吃。所以,只能祈求上天不要去一个兼容性要求极高的公司!

updatedupdated2020-07-032020-07-03