前言
Material Design 是 Google 推出的一套 UI 设计语言，该设计语言有着非常优秀的用户体验和视觉效果，已经成为现代 Web 开发和移动应用开发不可或缺的一部分。其中的流式布局，是 Material Design 最受欢迎和最常用的布局之一。本篇文章将详细介绍如何在 Material Design 中实现流式布局，希望对于前端开发者有帮助。
什么是流式布局？
流式布局（Fluid Layout）是指一种弹性布局方式，元素的宽度和高度可根据浏览器窗口的大小不同而自动调整，不同于传统的固定宽度布局。流式布局通常使用百分比（%）作为元素的宽度单位，这种方式可以使得网页的布局在各种屏幕尺寸的设备上都能够正确的展示。
如何实现流式布局
使用 CSS3 弹性布局模型
CSS3 弹性布局模型（Flexbox）是一种用于设计复杂网页布局的强大工具，其适用于任何容器和子元素，包括 HTML 元素和 SVG。通过 flex 属性，可以轻松实现弹性布局。
在 Material Design 中，通过设置父容器（通常是一个 div）为 flex 容器，同时对子元素设置 flex 属性，就可以实现流式布局。
-- -------------------- ---- -------
---- ------------------
---- ----------------------
---- ----------------------
---- ----------------------
------
-------
---------- -
------- -----
------ -----
-------- -----
---------------- --------------
-
---- -
------ ----
------- -----
----------------- --------
------ -----
-------- -----
------------ -------
---------------- -------
-
--------上述代码中，将外部容器 .container 设置为 display: flex;，表示将其设置为弹性容器；设置子元素 .box 的宽度为 30%，同时在预览窗口的单位中，高度为视窗的 30%，这样在不同的设备上都可以实现流式布局。
使用栅格布局
栅格布局是以栅格来划分页面的布局方式，其将页面分为若干列，再将每一列分为若干个单元格，便于对页面进行布局。
在 Material Design 中，可以通过栅格布局来实现流式布局。Bootstrap 是一套流行的栅格布局框架，可以帮助我们轻松地使用栅格布局。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- --------------- ---------------
---- --------------- ---------------
---- --------------- ---------------
------
------
---- -- --------- --- -- ---
----- ---------------- ---------------------------------------------------------------------
-------
---- -
------- -----
----------------- --------
------ -----
-------- -----
------------ -------
---------------- -------
-
--------上述代码中，将 .container 设置为 Bootstrap 的容器；设置 .row 为栅格的行；设置 .col-sm-4 为栅格的列，其中 sm 代表当设备的宽度大于等于 768px 时，将一行分为 12 个网格，4 个栅格代表该列的宽度为父容器的 33.3%，也就是实现了流式布局。最后设置子元素 .box 的高度和其他的样式即可。
总结
本篇文章中，我们介绍了 Material Design 中的流式布局，并提供了两种实现方式，分别是使用 CSS3 弹性布局模型和栅格布局。
弹性布局模型适用于通用的弹性布局需求，可以适用于更广泛的场景。而栅格布局可应用于大多数视觉设计和布局问题，对于有特定布局需求的前端开发者来说，是一个非常好的选择。希望能够对前端开发者们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fea4c495b1f8cacdd588b9