.flex-container {
    display: flex; /* 开启flex布局 */
    flex-wrap: wrap; /* 关键：超过宽度时自动换行 */
    gap: 10px; /* 元素之间的间距 */
    padding: 10px;
    box-sizing: border-box;
    /* 可选：设置最大宽度限制 */
    max-width: 1000px;
    margin: 0 auto;}

  /* 子元素：保持一行五个的宽度设置 */
  .flex-item {
    flex: 0 0 calc(20% - 8px); /* 20%宽度减去间距补偿 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;}

  /* 响应式调整：屏幕较小时减少每行数量 */
  @media (max-width: 768px) {
    .flex-item {
      flex: 0 0 calc(25% - 7.5px);}
  }

  @media (max-width: 576px) {
    .flex-item {
      flex: 0 0 calc(33.33% - 6.67px);}
  }

  @media (max-width: 400px) {
    .flex-item {
      flex: 0 0 calc(50% - 5px);}
  }