本文共 2428 字，大约阅读时间需要 8 分钟。
我常被同事称为“长沙前端群最闲的人”。每天浑浑噩噩地参加各种长沙不收费的前端群，主要是为了解决他人的问题，同时也在不断扩充自己的前端知识储备。最近我注意到一个很奇怪的现象：在布局相关的讨论中，flex布局占据了绝对主导地位，几乎没有人提到其他布局方式。这种现象让我感到有些困惑——难道所有人都只掌握了flex布局吗？还是说大家对其他布局方式不够熟悉，只是懒得去学习？
确实，flex布局确实非常实用且直观，但作为一个严谨的前端工程师，我认为我们也应该了解其他布局方式的存在。毕竟，仅仅依赖于一种布局方式在面对复杂的布局需求时，可能会显得力不从心。
本文将重点介绍flex布局之外两种相对少见的布局方式——display: table和display: grid，并简要介绍它们的基本使用方法。同时，我也会结合实际案例，说明这些布局方式在实际开发中的应用场景。
flex布局是前端开发中最常用的布局方式之一。它的魅力在于能够实现垂直居中等复杂布局，而无需依赖于对父容器或子容器尺寸的深刻理解。例如，垂直居中问题可以通过简单的display: flex和align-items: center来实现，而无需关注父容器或子容器的具体宽高。
然而，flex布局也存在一些局限性。首先，它仅适用于IE10及以上版本的浏览器，较旧的版本可能需要额外的兼容性处理。此外，flex布局的语法在不同的版本中可能会有所不同（如display: box与display: flex的区别），这也增加了开发的复杂性。
在这种情况下，有没有一种既能像flex布局那样灵活，又能兼容旧浏览器的布局方式呢？答案是肯定的——display: table布局。
display: table布局是一种兼容性非常强的布局方式，支持IE8及以上版本的浏览器。它的特点是对容器宽高的变化非常敏感，能够自动适应内容溢出的情况，这在一定程度上类似于flex布局的弹性特性。
以下是display: table布局的一些典型应用场景：
尽管display: table布局具有诸多优势，但它也有一些明显的缺点。其一，表格布局的横向排列总是等高的，这在某些场景中显得不够灵活。其二，与flex布局相比，display: table布局的API相对复杂，需要结合HTML表格标签进行操作，这也增加了学习和使用的难度。
也许正是因为这些原因，display: table布局才没有在现代前端开发中占据主流地位。
display: grid布局是flex布局的“强大”版本。它通过将容器划分为“行”和“列”，形成单元格的方式进行布局。Grid布局的一个显著优势是其二维布局能力，能够实现更复杂的布局需求。
以下是display: grid布局的基本使用方法：
网格的定义：
grid-template-columns和grid-template-rows来定义网格的列和行数量。grid-auto-flow属性用于指定网格项的流动方向，支持“先行后列”和“先列后行”的布局。网格间隔：
grid-row-gap、grid-column-gap或grid-gap来设置网格之间的间隔。对齐属性：
justify-items和align-items用于对齐网格内的元素。justify-content和align-content则用于对齐整个网格的对齐。网格项的定位：
grid-column-start、grid-column-end、grid-row-start和grid-row-end属性，可以精确地定义网格项的位置。流动性：
grid-auto-flow: row dense;或column dense;可以实现网格项的自动填充。以下是display: grid布局的一些典型应用场景：
Grid布局的学习曲线较为陡峭，但它的强大功能使其在现代前端开发中得到了广泛应用。然而，Grid布局的兼容性问题依然存在，尤其是在旧浏览器版本中可能需要额外的处理。
在讨论现代布局方式时，不能忽视float和absolute布局的重要性。尽管这两种布局方式在现代前端开发中不再是主流选择，但它们在特定场景中仍然具有重要的价值。
Float布局：
float布局的特点是能够将元素漂浮到页面的特定位置。Absolute布局：
absolute布局的特点是相对于最近的已定位祖先元素进行布局。尽管float和absolute布局在现代前端开发中不再是主流选择，但它们在某些特定场景中依然不可或缺。例如，在实现复杂的布局组合时，float和absolute布局往往能够提供更高的灵活性。
页面布局是一个伪命题，你可以通过各种不同的CSS搭配来实现同样的布局效果。Flex布局无疑是最流行的布局方式之一，但作为严谨的前端工程师，我们也应该关注其他布局方式的特点和适用场景。
在选择布局方式时，我们需要综合考虑以下因素：
通过对多种布局方式的深入学习和实践，我们可以在实际项目中做出更加理性的布局选择，从而实现更加高效和稳定的布局效果。
转载地址：http://wlbp.baihongyu.com/