Flex布局实现自适应卡片：根据方块数量自动填充容器

本文将指导您如何利用Flex布局创建灵活的卡片布局，使其能够根据内容数量自动调整并填充容器。

掌握Flex布局基础

Flex布局是构建响应式布局的强大工具。 建议您参考阮一峰老师的Flex布局教程进行学习：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

父容器与子元素的配合

1. 父容器: 设置一个父级容器，并将其声明为Flex容器 (display: flex)。 这个容器将容纳所有的卡片。
2. 子元素: 每个卡片都是父容器的子元素。

关键Flex属性设置

• display: flex;: 将父容器设置为Flex布局。
• flex-wrap: wrap;: 允许子元素自动换行，确保所有卡片都能显示在容器内。

子元素尺寸调整

为了实现卡片的等宽等高并居中显示，您可以根据需要调整子元素的width、height属性，并结合margin或padding属性进行微调，以达到最佳视觉效果。

通过以上步骤，您可以轻松创建一个根据方块数量自适应调整大小的卡片布局。 灵活运用Flex布局的属性，您可以创建更加多样化的布局效果。