下载国旗图像与图标精灵图

在下方生成器中选择国家，决定输出单张国旗还是合并的图标雪碧图，设置宽高比和尺寸后即可生成并下载。各控件说明见下方功能列表，推荐流程见使用步骤。

本页面的控件涵盖批量选择、国旗样式、输出类型、尺寸、布局和导出。以下是创建国旗图像时可用的主要选项。

• 选择国家名称：从完整列表中选择，按大洲筛选 （非洲、南极洲、亚洲、欧洲、澳大利亚、北美洲、南美洲），按名称搜索， 或根据需要勾选或取消勾选行。
• 粘贴国家代码：打开粘贴对话框，从 JavaScript 数组（例如 ['US', 'GB', 'DE']）、每行一个 ISO 代码的列表， 或逗号、冒号、分号、制表符或自定义分隔符的 CSV 等分隔字符串中批量选择国家。只有有效代码会应用到表格；无效条目会在您点击应用之前报告。
• 国旗样式：在生成单张国旗下载或图标精灵图之前，选择带波纹效果的波浪国旗或标准矩形外观的平面国旗。
• 随机排列国家顺序：随机化国家在精灵图网格中的排列顺序。 诸如 iso_US 的 ISO 类名保持不变；仅每个国旗在画布上的位置会改变。
• 选择图像类型：选择下载单张国旗获取单独的调整尺寸图像，或选择创建图标国旗将所有所选国旗放入一张图像中。
• 保持比例：将宽度和高度锁定为 4:3 或 16:9 宽高比，或关闭锁定以使用自定义尺寸。
• 设置图像尺寸：为每个国旗输入宽度和高度。单张国旗和图标模式的限制不同，以便精灵图保持较小，而单独下载可以更大。
• 生成图像：根据您的选择构建调整尺寸后的国旗或合并的图标画布。
• 自动适应网格：图标生成后，让工具根据所选国家数量自动计算行和列，无需手动设置。
• 地球图标：在精灵图预览中为没有国旗图像的国家显示地球占位符。
• 导出 PNG、ZIP 和 JSON：仅下载生成的 PNG，下载包含 flag-icons.png 及匹配 HTML 和 CSS 文件的 ZIP 压缩包，或下载包含精灵图位置和国家元数据的 JSON 文件，用于 React、canvas 和其他应用工作流。
• 国旗代码：图标生成后，从国旗代码部分复制 HTML 和 CSS。输出使用一张精灵图文件（flag-icons.png），其中包含 flags_img 和 iso_AF 等类，每个国家都有正确的 background-position。

按照以下步骤，使用本页面的选项创建国旗图像。

1. 选择所需的国家名称。使用大洲筛选或搜索框，然后仅勾选需要的行。
2. 选择图像类型：选择下载单张国旗获取单独文件，或选择创建图标国旗将所有所选国旗放入一张图像中。
3. 可选启用保持比例，并选择 4:3 或 16:9 宽高比。
4. 在所选图像类型的限制范围内输入宽度和高度来设置图像尺寸。
5. 生成图像。使用下载图像仅获取 PNG，使用下载 ZIP 在一个文件中同时获取图像与 HTML 和 CSS，或从国旗代码部分复制 HTML 和 CSS 而不下载。

图像类型决定您获得多个单独文件还是一张精灵图。选择与项目中使用国旗方式相匹配的模式。

图标模式可选择一个或多个国家，但包含四个或更多国旗的网格通常能得到更实用的精灵图布局。单张国旗模式适用于只需要一个国家或少量单独文件的情况。

保持比例和设置图像尺寸协同工作。比例锁定开启时，更改宽度或高度会同步更新另一侧，使国旗保持比例。

• 4:3 宽高比：适用于紧凑图标和列表项的常见国旗形状。
• 16:9 宽高比：当您需要横向缩略图时使用的更宽画框。
• 当您需要与这些预设不匹配的自定义宽度和高度时，关闭保持比例。

尺寸限制取决于图像类型。图标模式使每个国旗保持较小（约 15px 至 100px 宽），以便合并的精灵图易于管理。 单张国旗模式允许更大的宽度（约 15px 至 1000px），用于显示或下载素材。高度遵循相同的模式规则。

生成图标精灵图后，预览面板可让您在下载或复制代码之前微调国旗在画布上的排列方式。

• 行和列：控制精灵图网格中横向和纵向显示的国旗数量。
• 行间距和列间距：在国旗单元格之间添加横向或纵向间隙。
• 内边距：在合并图像的外边缘添加空间。
• 圆角半径：需要更柔和的图标时，通过圆角裁剪柔化国旗边角。
• 预览图像适应宽度：将宽画布适配到页面，以便查看完整精灵图。
• 更新：布局更改后重新构建画布，使位置与生成的 CSS 保持同步。
• 国旗代码：从国旗代码部分复制生成的 HTML 和 CSS。每个所选国家获得一个 iso_XX 类，在共享精灵图上具有匹配的 background-position。
• 下载图像：当您已有自己的 HTML 和 CSS，或只需要图像素材时，仅导出生成的 PNG 精灵图。
• 下载 ZIP：在一个 ZIP 中导出 flag-icons.png 以及生成的 HTML 和 CSS，使完整精灵图包保持同步。

将总画布尺寸保持在工具显示的最大宽度和高度限制以内。过大的网格可能超出允许的图像尺寸；若出现尺寸警告，请减少行、列或图标大小。 更改间距或大小后，在复制 CSS 或下载 ZIP 之前再次更新预览，以确保位置准确。

在创建图标国旗模式下，国旗代码部分会生成指向一张精灵图的即用代码。 每个国家使用共享的 flags_img 类，以及设置该国旗单元格精确背景偏移的 ISO 类（如 iso_AF）。

HTML 示例将国旗框与国家标签配对。CSS 示例定义 flex 行、共享精灵图尺寸以及每个 ISO 代码的一条规则。 您的实时输出会根据所选国家和布局更新。

<div class="flex-box">
    <div class="flags_img iso_AF"></div>
    <div>Afghanistan</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AX"></div>
    <div>Aland Islands</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AL"></div>
    <div>Albania</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_DZ"></div>
    <div>Algeria</div>
</div>

.flex-box {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flags_img {
    background-image: url('flag-icons.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: transparent;
    vertical-align: middle;
    background-position: 51px 29px;
    margin: 8px;
}

.iso_AF {background-position: 0 0}
.iso_AL {background-position: -102px 0}
.iso_AX {background-position: -51px 0}
.iso_DZ {background-position: -153px 0}

将 flag-icons.png 放在 CSS 旁边（或更新 url() 路径），然后将 HTML 和 CSS 粘贴到页面中。 当您希望图像、HTML 和 CSS 作为匹配包一起获取时，请使用下载 ZIP。更改行、间距或图标大小会改变像素偏移，因此请点击更新并复制最新的国旗代码，或在布局更改后重新下载 ZIP。

国旗图标出现在许多产品界面中。以下是使用本工具生成图像的常见场景。

• 网站页眉中的语言和地区切换器
• 电话或地址表单旁的国家选择字段
• 门店定位、配送选项和结账国家列表
• 按国家分组分析或用户的仪表板
• 显示可用语言环境的移动应用设置界面
• 突出支持市场的营销页面
• 通过一次 PNG 请求在每个国家名称旁显示国旗的 CSS 精灵图列表

当标记或应用数据中也需要 ISO 代码和标签时，请将国旗图标与国家名称下拉列表或 JSON 国家列表配合使用。相关链接列在相关工具部分。

关于单张国旗下载、图标精灵图、CSS background-position、宽高比、尺寸限制、布局选项和相关 SVG 国旗的常见问题解答。

需要 SVG 国旗、国家下拉列表标记或其他格式的国家数据？这些页面涵盖相近的工作流程。

• SVG 国旗下载 用于可缩放矢量国旗和 SVG 代码。
• HTML 国家名称下拉列表 用于带 ISO 代码和标签的选择列表。
• JavaScript 国家名称数组 用于 JSON 和对象形式的国家列表。
• PHP 国家名称数组 用于服务器端国家数据。
• 图像工具中心 用于其他图像下载和转换页面。
• 图像转 WebP 转换器 当您想优化导出的国旗 PNG 时使用。