/* 父容器使用 Flexbox 布局 */
.flag_link {
    display: flex;
    justify-content: space-between; /* 元素均匀分布，间隔一致 */
    gap: 20px; /* 设置间隔 */
    flex-wrap: wrap; /* 允许换行（在小屏设备上） */
    margin: 0 auto; /* 居中容器 */
}

/* 每个 flag_box 的宽度和样式 */
.flag_box {
    flex: 1 1 30%; /* 每个 box 占 30% 宽度 */
    box-sizing: border-box; /* 确保 padding 和 margin 不影响宽度 */
    text-align: center; /* 内容居中 */
}

/* 使图片自适应容器宽度 */
.flag_box img {
    max-width: 100%;
    height: auto;
}

/* 响应式设计，适配手机端 */
@media (max-width: 768px) {
    .flag_link {
        justify-content: center; /* 在小屏设备上居中显示 */
    }

    .flag_box {
        flex: 1 1 30%; /* 在小屏设备上每个 box 占 30% 宽度 */
        max-width: 30%; /* 限制最大宽度为 30% */
    }

    /* 调整 gap 间隔，确保小屏设备下不被挤压 */
    .flag_link {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .flag_box {
        flex: 1 1 100%; /* 每个 box 占 100% 宽度 */
    }
}