如何用Flexbox或CSS Grid实现三Div的两列布局（按钮需垂直居中）

嘿，我完全get到你的需求了——每个卡片容器里，标题和描述要挤在左边一列，按钮单独在右边，而且当左边内容变高时，按钮得乖乖垂直居中，还不能受外层那个grid的影响。没问题，我给你准备了两种完美的方案，Flexbox和CSS Grid都能搞定，咱们一步步来：

方案一：CSS Grid（无需修改现有HTML结构） #

这个方案最省心，不用动你现有的HTML代码，直接加几行CSS就能实现：

首先给.container设置独立的Grid布局，指定两列（第一列占满剩余空间，第二列自适应按钮宽度）；然后把标题和描述都归到第一列，按钮放在第二列，最后让按钮垂直居中：

.container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满可用空间，第二列随按钮宽度自适应 */
  column-gap: 24px; /* 列间距和外层保持一致风格 */
  align-items: center; /* 让容器内所有元素垂直居中对齐 */
}

/* 让标题和描述都占据第一列的位置 */
.title, .description {
  grid-column: 1;
}

.button {
  grid-column: 2;
}

这样设置后，不管左边的标题和描述内容有多高，右边的按钮都会自动垂直居中在容器的中间位置，而且每个.container都是独立的Grid容器，完全不会继承外层Grid的样式。

方案二：Flexbox（需微调HTML结构） #

如果你更习惯用Flexbox的布局逻辑，只需要给标题和描述加个包裹容器就行，逻辑会更清晰：

首先调整你的HTML结构，把title和description放进一个名为.content的div里：

<div class="container">
  <div class="content">
    <div class="title">Title of Element</div>
    <div class="description">This is the description of the element.</div>
  </div>
  <a class="button">Button</a>
</div>

然后给.container设置Flex布局，让内容容器和按钮在一行排列，同时保持垂直居中：

.container {
  display: flex;
  align-items: center; /* 让容器内元素垂直居中 */
  gap: 24px; /* 元素之间的间距 */
}

.content {
  flex: 1; /* 让内容容器占满剩余可用空间 */
  display: flex;
  flex-direction: column; /* 让标题和描述垂直堆叠 */
}

这样调整后，按钮同样会跟着左边内容的高度自动垂直居中，Flexbox的布局逻辑也很直观，方便你后续调整样式。

两种方案都能完美实现你的需求，看你更喜欢哪种。测试一下，当你给description加大量内容时，按钮都会稳稳地居中在容器中间~

备注：内容来源于stack exchange，提问作者user1138