前言

在现代网页设计中，布局是至关重要的一环。一个好的布局不仅能显著提升用户体验，还能增强网站的可用性和美观性

在之前的文章中，我们深入了解了CSS的两项强大布局工具：Flex和Grid，并掌握了它们的基本属性和应用方法，能够创建各种复杂且灵活的网页结构。本篇文章将通过几个常见的布局实例，帮助你更加深入地理解这些布局工具的实际应用，提升你的网页设计水平

固定比例盒子

在进入正题前，先简单提一个问题：你知道如何在宽度不确定的情况下，仅用CSS实现一个固定比例的盒子吗？

如上图，不管容器宽度如何变化，始终使其宽高比为16:9

本题的关键主要是利用一个常见容易忽略的技巧，即利用margin/padding的百分比基于父元素的宽度而不是高度

代码如下

这个技巧在网页开发中挺实用的，不了解的可以了解一下

圣杯布局

这是一种常见的网站布局，页面从上到下，分为三部分：页头(header)，主体(body)，页尾(footer)；其中主体又水平分为三列，从左到右为：菜单栏、内容和边栏，大致如下：

Flex实现

用Flex实现比较简单，只需实用两个Flex容器：一个垂直排列；一个横向排列，示意图如下：

代码如下

• HTML

• CSS

Grid实现

使用Grid则更为简便，只需一个Grid容器，对应分好区域即可，如下：

代码如下

• HTML

• CSS

瀑布流布局

瀑布流布局(Masonry Layout)是一种错落有致的美观布局方式，通常用于展示图片库或博客文章的缩略图，使各个项目在视觉上形成一种自然的、紧凑的排列

目前，CSS规范暂未有一个标准属性，能够原生、完美地实现该需求，因此，只能通过特殊的方法进行实现

传统的方法都是完全通过Js计算设置每个元素的定位或translate实现，下面将两种运用Flex和Grid辅助实现的方式

Flex实现

主要使用Flex单栏流式排列的特性

• 使用垂直排列的Flex容器
• 需要几列瀑布就创建几个Flex容器
• 根据元素的高及当前容器的高决定元素将放入哪个容器

大致效果如下

代码如下

• HTML

• CSS

• JS

利用Flex的特点，无需要去计算每个项目的具体位置，只需要根据高度将其放入合适的列即可

Grid实现

主要使用Grid单项目占多格及紧凑布局的特性

• 首先创建一个Grid容器，用于瀑布流布局
• 容器的列设置为瀑布流需要的列
• 容器的行设置尽量小写，作为瀑布流项目的基本单位
• 根据每个项目的高计算每个项目所占行数设置即可

大致效果如下

代码如下

• HTML

• CSS

• Js

相比Flex而言，这种方法更为简便，只需根据高度计算出占据行数即可，Grid会自动将其排列好，通过dense的紧凑排列，尽可能将空白利用，最终实现瀑布效果

其实，对于瀑布流的实现已有一个属性grid-template-rows: masonry;可以原生地实现效果

该属性是在 2020 年 5 月左右提出的，并且在 2020 年底在 Firefox Nightly 中有了一个实验性的实现(需将layout.css.grid-template-masonry-value.enabled设置为true)

目前只在Firefox Nightly中可以使用，只需在Grid容器内设置grid-template-rows属性值为masonry即可

grid-template-rows: masonry目前只是一个实验性提案，还不是正式的 CSS 标准。这个提案旨在将瀑布流布局(masonry layout)引入 CSS Grid Layout 模块的第三层级中。然而，关于是否将瀑布流布局整合到 Grid 中，或者将其独立为一个单独的布局模型，业界仍有争议

总结

为了避免篇幅过长，这里只介绍了几种有意思的布局，但Flex和Grid的强大不止如此，如：

• 使用Flex快速实现水平垂直居中
• 使用Flex实现表单排列
• 使用Grid实现网格列表布局
• 使用Grid实现蜂窝布局
• 使用Grid实现GTA封面

总之，使用Flex和Grid可以实现很多有意思的布局，具体可自行探索或在底下讨论