Flexbox布局下如何实现国旗与对应语言文本作为整体不拆分

你的思路是正确的，只要将每组国旗和对应语言文本包裹为独立的子容器，就能保证二者作为一个整体参与flex排布，不会出现拆分换行的情况。

原有代码存在两个核心问题：

• 所有img共用同一个id属性，不符合HTML规范（id在单页面中必须唯一）
• flex容器的直接子元素是分散的img和a标签，导致二者会被当作独立元素计算排布位置

CSS 部分 #

/* 原来的#size改为class，避免id重复 */
.size {
  width: 105px;
  height: 60px;
}

.flex-container {
  margin: auto;
  text-align: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 80%;
  height: 500px;
  background-color: aqua;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

/* 新增每组语言项的样式，作为独立整体 */
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 调整国旗和文字之间的间距，可自行修改 */
}

HTML 部分 #

<div class="flex-container">
  <div class="lang-item">
    <img src="Flag/BU.png" class="size">
    <a>България</a>
  </div>
  <div class="lang-item">
    <img src="Flag/CH.png" class="size">
    <a>中国人</a>
  </div>
  <div class="lang-item">
    <img src="Flag/FR.png" class="size">
    <a>Francaise</a>
  </div>
  <div class="lang-item">
    <img src="Flag/GER.png" class="size">
    <a>Deutsch</a>
  </div>
  <div class="lang-item">
    <img src="Flag/HU.png" class="size">
    <a>Magyar</a>
  </div>
  <div class="lang-item">
    <img src="Flag/IN.png" class="size">
    <a>हिंदी</a>
  </div>
  <div class="lang-item">
    <img src="Flag/JA.png" class="size">
    <a>日本</a>
  </div>
  <div class="lang-item">
    <img src="Flag/SK.png" class="size">
    <a>한국인</a>
  </div>
  <div class="lang-item">
    <img src="Flag/SP.png" class="size">
    <a>Español</a>
  </div>
  <div class="lang-item">
    <img src="Flag/UK.png" class="size">
    <a>English</a>
  </div>
</div>

修改后flex容器的直接子元素变为10个.lang-item容器，每个容器内部包裹对应的国旗和语言文本，作为独立的整体参与父容器的换行计算，排布到容器边缘时会整组换行，不会出现国旗和文本分离的情况。

内容的提问来源于stack exchange，提问作者notetwo