使用Flexbox实现响应式头像布局：1. 设置flex-wrap: wrap使头像自动换行；2. 通过justify-content控制对齐方式，如center实现居中；3. 结合gap和border-radius优化间距与圆形显示效果。
在现代网页设计中，头像排列常用于团队展示、用户评论或社交页面。使用 Flexbox 可以轻松实现响应式布局，自动换行并对齐元素。关键在于 flex-wrap: wrap 和 justify-content 的合理搭配。
启用换行：flex-wrap: wrap
默认情况下，Flex 容器中的子项会尽量排在一行。为了让头像在空间不足时自动换行，需要设置容器的 flex-wrap: wrap。
说明：- 当容器宽度变小（如手机屏幕），头像会自动向下换行，避免溢出。
- 结合 flex-direction: row（默认值），实现从左到右、多行排列。
控制对齐方式：justify-content
这个属性决定主轴（横向）上子元素的对齐方式。常见取值包括：
- flex-start：左对齐（默认）
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：所有项目间和边缘间距完全相等
例如，在头像布局中使用 justify-content: center 可让每行头像居中显示，视觉更平衡。
立即学习“前端免费学习笔记（深入）”；
完整示例代码
以下是一个响应式头像网格的实际实现：
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@
效果说明：
- 头像圆形显示，通过 border-radius: 50% 实现。
- gap 提供统一间距，比 margin 更易控制。
- 在小屏幕上，每行显示的头像数量自动减少，依然保持居中对齐。
