Flex布局下左侧垂直居中图标搭配锚点文本自动换行实现问询

完全可以保留flex布局来实现需求，只需要调整HTML结构和CSS样式即可，具体方案如下：

调整HTML结构 #

把所有锚点元素放到一个单独的容器里，同时去掉多余的 占位span，用CSS间距控制更灵活：

<div class="div-container">
  <mat-icon>new_release</mat-icon>
  <div class="text-content">
    <a><span>VO/YI/AI 1 HJ.2022a;</span></a>
    <a><span>ABC/BBC/VOA 7.2022;</span></a>
    <a><span>UN/AIDA 16.8.2022</span></a>
  </div>
</div>

优化CSS样式 #

.div-container{
    display: flex;
    align-items: center; /* 让图标和文本容器整体垂直居中 */
    gap: 8px; /* 图标和文本容器之间的间距，可按需调整 */
}
.text-content{
    flex: 1; /* 占据容器剩余所有空间，确保文本有足够换行空间 */
}
.text-content a{
    display: inline-block; /* 支持margin控制间距 */
    margin-right: 12px; /* 锚点之间的间距，可按需调整 */
}

效果说明 #

• flex:1 给文本容器分配了父容器除图标外的所有可用空间，当空间不足时，锚点元素会自动换行；
• align-items:center 保证图标始终和文本块垂直居中对齐；
• 用gap和margin代替硬编码的 ，布局更灵活易维护。

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