Flexbox布局问题：实现文字左、图片右的垂直居中矩形框

直接调整.apps-container__app-box的flex布局属性，就能实现图片居右且整体垂直居中的效果，不用破坏现有的垂直居中设置：

• 保留a标签和内部.apps-container__app-box的display: flex; align-items: center;，这是保证垂直居中的核心规则。
• 给.apps-container__app-box添加justify-content: space-between;，应用名称会自动靠左，图片被挤到右侧。
• 如果需要名称和图片之间的间距更灵活（比如名称左侧有内边距时），可以给图片元素加margin-left: auto;，效果和space-between类似，适配性更强。

代码示例 #

/* 外层a标签，确保占满宽度并维持垂直居中 */
.apps-container__app-link {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 内部容器，实现左右分布+垂直居中 */
.apps-container__app-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  background-color: #ccc; /* 灰色背景示例 */
}

/* 可选：用margin-left:auto替代space-between的写法 */
.apps-container__app-img {
  margin-left: auto;
  /* 图片尺寸等其他样式 */
}

对应HTML结构示例 #

<a href="#" class="apps-container__app-link">
  <div class="apps-container__app-box">
    <span class="apps-container__app-name">应用名称</span>
    <img src="app-icon.png" alt="应用图标" class="apps-container__app-img">
  </div>
</a>

原理很直白：align-items: center负责让所有子元素在垂直方向居中，justify-content: space-between或margin-left: auto则控制水平方向的元素分布，把图片推到右侧，同时完全不影响垂直居中的效果。

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