如何用UL LI构建复杂布局的响应式卡片（附示例）

我尝试在<ul><li>列表中用CSS Flexbox构建响应式卡片，始终达不到预期布局。预期效果是左侧垂直显示SKU信息，右侧是包含标题、描述的卡片内容。

问题根源分析 #

1. HTML结构不合法：<a>标签直接作为<ul>的子元素不符合规范，<ul>的直接子节点必须是<li>，错误的结构会干扰Flexbox的布局逻辑。
2. 旋转元素的布局占位问题：transform: rotate(-90deg)仅改变视觉呈现，元素的原始占位空间还是水平状态，导致旋转后位置偏移，无法和右侧卡片垂直对齐。
3. Flexbox方向与对齐配置错误：
   • 右侧卡片容器.pack-card设置了display: flex但未指定方向，默认横向排列，导致标题、描述等内容横向铺开，不符合预期的垂直布局。
   • 未给Flex容器和项目设置合适的对齐、分配规则，无法实现左侧固定宽度、右侧自适应的布局。

修正后的代码 #

HTML代码 #

<ul class="packs-list">
  <li class="pack">
    <a href="#">
      <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
      <div class="pack-card">
        <h2 class="pack-title">Customer Engagement</h2>
        <div class="pack-description">This is the description for the.</div>
        <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
      </div>
    </a>
  </li>
</ul>

CSS代码 #

.pack-sku {
  background-color: red;
  white-space: nowrap;
  /* 调整旋转原点和位置，修正占位偏移 */
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top left;
  /* 固定宽度，避免压缩 */
  width: 120px;
  /* 居中文字 */
  text-align: center;
} 

.pack-card {
  background-color: brown;
  /* 设置垂直布局 */
  display: flex;
  flex-direction: column;
  /* 占满剩余空间 */
  flex: 1;
  padding: 1rem;
} 

.pack {
  background-color: green;
  width: 100%;
  /* 让li内部的元素横向排列 */
  display: flex;
  align-items: center;
} 

.packs-list {
  background-color: yellow;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  display: flex;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.pack-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.pack-description {
  margin-bottom: 1rem;
}

关键修改说明 #

• 调整HTML结构：将<a>标签移入<li>内部，符合列表元素的规范。
• 修正旋转元素布局：通过transform-origin和translateY调整旋转后的位置，解决占位偏移问题，同时固定.pack-sku的宽度确保内容完整。
• 配置Flexbox方向：给.pack-card设置flex-direction: column，让内部内容垂直排列。
• 分配空间：给.pack-card添加flex: 1，使其占据剩余宽度，实现响应式布局；给.pack设置align-items: center，让左右元素垂直居中对齐。

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