Flexbox实现卡片布局遇长标题适配问题求解决方案

Flexbox完全是处理这类布局的最优方案，它能轻松实现灵活对齐和自适应，同时保证“更多”图标固定位置。以下是修正后的代码和关键调整点：

修正后的CSS代码 #

.map-drawer-item {
  border-radius: 0.25rem;
  background: #EEE;
  color: #797979;
  font-family: Roboto;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1rem; /* 统一内边距，替代单独的padding-right */
  max-width: 300px;
}

.map-drawer-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让标题区和更多图标左右分布 */
  width: 100%; /* 占满父元素宽度，确保更多图标靠右 */
  margin-bottom: 0.5rem; /* 替代负margin，避免布局塌陷 */
}

.map-drawer-item-title-wrap {
  display: flex;
  align-items: center;
  flex: 1; /* 让标题区占据剩余空间，限制更多图标位置 */
  gap: 1rem; /* 替代margin，更灵活的间距 */
}

.map-drawer-item-status {
  flex-shrink: 0; /* 状态图标不缩小 */
}

.map-drawer-item-header h5 {
  font-size: 1rem;
  margin: 0;
  flex: 1;
  white-space: nowrap; /* 可选：单行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 标题过长时显示省略号 */
  /* 如果需要多行显示，可替换为：
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  */
}

.map-drawer-item-sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: #797979;
  padding-left: calc(1rem + 24px); /* 基于状态图标宽度+间距计算，替代固定margin-left */
  padding-bottom: 0; /* 移除多余内边距 */
}

.map-drawer-item-icon-more {
  flex-shrink: 0; /* 更多图标不缩小 */
  font-size: 1.2rem;
  margin-left: 0.5rem; /* 和标题保持间距 */
}

修正后的HTML代码 #

<div class="map-drawer-item">
  <div class="map-drawer-item-header">
    <div class="map-drawer-item-title-wrap">
      <span class="map-drawer-item-status">
        <img src="empty.svg" alt="状态图标" srcset="">
      </span>
      <h5>AT-TP279 - 这是一个非常长的标题文本用来测试布局是否正常显示</h5>
    </div>
    <span class="map-drawer-item-icon-more">
      <img src="more-icon.svg" alt="更多选项" srcset="">
    </span>
  </div>
  <div class="map-drawer-item-sub">
    <span>1692 km / 07:50</span>
  </div>
</div>

关键调整说明 #

• Flex布局优化：将“更多”图标移入map-drawer-item-header，通过justify-content: space-between和flex:1让标题区和图标自动分配空间，替代绝对定位，避免标题过长时图标位置偏移。
• 标题溢出处理：给h5添加溢出控制，单行显示时用text-overflow: ellipsis，多行时用webkit多行截断，保证标题过长时不会撑破布局。
• 灵活间距：用gap替代固定margin，用calc()计算副标题的左内边距，适配状态图标的宽度，避免固定值导致的布局错位。
• 移除问题样式：删除transform: translateY(-50%)和负margin，避免布局塌陷和位置偏移。

如果不需要Flexbox，也可以用Grid布局，但Flexbox在一维布局（行/列）中更简洁直观，是这类卡片布局的首选。

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