Flex布局实现自适应卡片：根据方块数量自动填充容器
本文将指导您如何利用Flex布局创建灵活的卡片布局，使其能够根据内容数量自动调整并填充容器。
掌握Flex布局基础
Flex布局是构建响应式布局的强大工具。 建议您参考阮一峰老师的Flex布局教程进行学习：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
父容器与子元素的配合
-
父容器: 设置一个父级容器，并将其声明为Flex容器 (
display: flex)。 这个容器将容纳所有的卡片。 - 子元素: 每个卡片都是父容器的子元素。
关键Flex属性设置
-
display: flex;: 将父容器设置为Flex布局。 -
flex-wrap: wrap;: 允许子元素自动换行，确保所有卡片都能显示在容器内。
子元素尺寸调整
为了实现卡片的等宽等高并居中显示，您可以根据需要调整子元素的width、height属性，并结合margin或padding属性进行微调，以达到最佳视觉效果。
通过以上步骤，您可以轻松创建一个根据方块数量自适应调整大小的卡片布局。 灵活运用Flex布局的属性，您可以创建更加多样化的布局效果。
