近年来，CSS世界出现了复杂的、专门的布局工具，它们取代了现有的解决方法，例如使用表格、浮动和绝对定位。Flexbox，或灵活的盒子布局模块，是这些新布局工具中的第一个，紧随其后的是CSS网格布局模块。我们将在本文中简单易懂地介绍flexbox。随着CSS网格布局的引入，您可能会问flexbox布局是否真的有必要。虽然它们的功能有一些重叠，但它们在CSS布局中都有非常特定的用途。一般来说，flexbox在一维场景中效果最好（例如，一堆相似的元素），而网格最适合二维场景（例如，一整页元素）。尽管如此，flexbox仍然可以用于整个页面的布局，从而为那些还不支持网格布局的浏览器提供合适的兼容性。使用Flexbox的好处：页面元素可以任意方向放置（左、右、从上到下甚至从下到上）布局内容的视觉顺序可以反转或重新排列，元素的大小可以调整“弹性”适配可用空间，并根据容器或兄弟元素进行相应对齐，可以轻松实现等栏布局（独立于每栏内容）。为了说明它的各种属性和可能性，让我们假设以下布局用例：首先，将元素放在.main中，例如
