使用Flex在6列布局内创建2列并对齐元素的实现咨询

要实现你需要的图文分栏卡片布局，完全可以利用12列系统的col-6规则拆分卡片内部的文本和图片区域，以下是具体修改步骤：

1. 调整HTML结构 #

将.card__content内的文本和图片分别放入col col-6容器中，复用现有12列布局规则，确保两者各占卡片宽度的50%：

<main>
    <div class="row">
      <div class="col col-6">
        <div class="card">
          <h1>Mediterranean Cobb Salad</h1>
          <p>Serves: 2 people</p>

          <div class="card__content row">
            <div class="col col-6">
              <p>American garden salad typically made with chopped salad greens, tomato, crisp bacon, hard-boiled
                eggs,
                avocado, chives, blue cheese, and red-wine vinaigrette
              </p>
            </div>
            <div class="col col-6">
              <img src="/img/fresh-salad-with-turkey-eggs-vegetables-removebg-preview.png" alt="Mediterranean Cobb Salad">
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

2. 优化CSS样式 #

补充卡片内边距、图片自适应规则，调整元素对齐方式，避免布局错乱：

:root {
  --font-secondary: sans-serif; /* 补全示例变量，可按需修改 */
  --spacing: 1px; /* 补全示例变量，可按需修改 */
}

.card {
  border-radius: 30px;
  background: #ffece1;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 24px; /* 添加内边距，避免内容贴边 */
}

.card__content {
  display: flex;
  align-items: center; /* 让文本与图片垂直居中对齐 */
  gap: 16px; /* 增加两栏间距 */
  margin-top: 16px; /* 与上方标题、描述拉开距离 */
}

.card h1 {
  font-family: var(--font-secondary);
  font-size: calc(var(--spacing) * 15);
  line-height: calc(var(--spacing) * 18);
  margin: 0 0 8px; /* 调整标题上下间距 */
}

.card p {
  margin: 0; /* 清除段落默认边距，避免多余空白 */
}

.card__content img {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片比例 */
  object-fit: cover; /* 避免图片拉伸变形 */
}

.row {
 display: flex;
 flex-wrap: wrap;
 margin-left: -8px;
 margin-right: -8px;
}

.col {
 box-sizing: border-box;
 padding-left: 8px;
 padding-right: 8px;
}

.col-6 {
 width: 50%;
}

关键修改说明 #

• 给.card__content添加row类，复用12列布局的Flex规则，内部两个col-6自然各占50%宽度
• 给卡片添加内边距，优化视觉体验
• 设置图片自适应容器宽度，避免溢出
• 调整文本与图片的垂直对齐方式，让布局更规整

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