小伙伴可能已经学会了html、css、javascript等前端知识，还接触了vue、react、angular等各种框架。

在这个时候，我们自认为已经掌握了前端的知识后，信誓旦旦的找工作时，却被面试官的一个看似简单的切图问题给难倒了，即便是混过了面试，工作中也不得心应手。

这是因为我们忽视了一个重要知识：前端布局。

布局既是前端开发人员的核心技能，又在工作中占很大的比重。

什么是前端布局？

在盖一栋房子时，我们是打算将房子盖成两室一厅呢还是将它隔成三室一厅？如何合理的进行户型规划呢？

前端布局，做的就是这么一件事——对页面模块和内容进行科学合理的组织与呈现。

为什么我们要学习前端布局？

前端布局，既是前端开发人员的核心基础技能，也是在工作中占很大的比重。同时前端布局由于入门容易、深入困难的特点，历来被人们作为入门知识所轻视。

同时由于CSS3 Flex布局和grid布局等颠覆性布局方式的出现，也彻底改变了传统的div+css的单一布局方式，这让很多人显得无所适从。

然而良好的前端布局是进行javascript书写和交互的基础。

布局的好坏直接影响着后续的所有工作进展的顺利与否与效率的高低。

所以身为一名合格的前端开发人员，掌握并精通前端布局，是最基本的职业要求。

怎么样学习前端布局？

前端布局，是一项入门很简单的技能，但想要融会贯通，绝不是一件易事。坚实的前端布局技能，能让你在今后的工作中游刃有余。因此我们需要全方位，细致的了解它，并且学会灵活的运用它。

W3cschool这次携手国内知名前端教育咨询团队“面包理想”为各位小伙伴推出w3cschool首个专栏：《前端高手必经之路：前端布局》，从易到难，深入简出，为各位小伙伴讲解前端布局的知识。

这次专栏将从CSS布局历史入手，再细致的讲解常用的CSS布局方式，教你将它们运用到应用场景中去，最后通过经典的工作常用案例，巩固所学的知识。至此，你已经掌握了布局技能，并能将其用在实际工作当中。

原文发布时间为：2018-10-10

本文来自云栖社区合作伙伴“w3cschool”，了解相关信息可以关注“w3cschool”。