特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(
原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)
Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里，Web的布局就应该是方方正正的，因为Web中的每个元素都类似一个盒子，这些盒子就是方方正正，规规矩矩地。同时在很多视觉的眼里也认为，Web的布局无法打破矩形排列的限制。比如说，要在Web中实现一个类似杂志的排版是非常困难的，甚至是不太可能的。值得庆幸的是，时至今日，Web的技术在不断的革新，很多新的特性可以让我们打破这样的限制，让你在Web上实现像杂志一样的排版布局。接下来，我们就来看看，在Web中实现媒体布局会有哪些亮点，有可能会用到哪些特性。
杂志布局
一直以来，我们看到的Web布局或者说我们致力实现的Web布局都类似下图这样方方正正：
而往往止步于像杂志排版的Web布局效果：
在这篇文章中不会和大家过多的纠结什么样的Web布局（正常的Web排版 vs. 像杂志的Web排版）效果更好。我们还是仅从技术层来聊这方面的事情，必竟我们是做技术的。
众所周知，Web的排版技术也经历了很多的变革。针对不同阶段，Web布局相对应的模式也可以套入整个设计演变过程，如果有人猿进化来描述的话，有点类似下图：
如果你对Web布局演进过程感兴趣的话，建议花点时间阅读《Web布局发展历程》一文。
从上图我们可以看出，自从2019年开始，Web的设计就得不是那么的循规蹈矩，看上去更复杂，也更有范了。同时在互联网上也能逐渐看到这些复杂布局的Web页面。甚至是类似杂志排版的Web布局效果也逐渐在互联网上有其身影。比如@Andy Clarke的新书《Art Direction for the Web》就专门介绍了这方面的技术。
杂志布局可能会运用到的技术
如果你有一定要实现类似于杂志布局的效果，将可能会运用到下面这些技术。
Flexbox和Grid
到目前为止，Flexbox可以说是目前最为流行运用最广泛的一种布局技术。因为他足够的灵活，相对而言，开发者使用他来为Web布局可以省去很多的烦恼，而且灵活性和可扩展也非常的强。但他也有一定的局限性，那就是他依旧是一维布局。
CSS Grid将改变这种局面，因为他是唯一的一种二维布局技术。在现代的布局中，可以将Flexbox和Grid结合在一起使用，可以达到更佳的效果。比如@shadeed9在他的博文中《Highlights From Building a Magazine Layout》举的示例，就将这两种布局技术结合在一起，实现了类似杂志的布局效果。
如果你看到效果不是像下图这样的话，建议你打开浏览器重新访问上面示例：
《Highlights From Building a Magazine Layout》一文就是介绍如何实现一个杂志布局的，文章中还介绍了一些实现杂志布局的亮点，后文中我们也会提到相关的技术点。
CSS Exclusions
如需转载，烦请注明出处：https://www.w3cplus.com/css/highlights-from-building-a-magazine-layout.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
