如何用CSS Flex实现隐私提示标题、描述与按钮同行对齐？

修改核心CSS规则 #

直接调整.cn-body的Flex布局属性，搭配子元素的Flex控制，就能在不改动HTML结构的前提下，让「Your Privacy」标题、描述文本和操作按钮在同一行显示：

/* 覆盖原有纵向布局，改为横向排列 */
.cn-body {
  display: flex;
  flex-direction: row !important; /* 若原有样式优先级更高，可添加!important强制覆盖 */
  align-items: center; /* 让所有元素垂直居中对齐 */
  gap: 1.5rem; /* 给元素间添加合理间距，避免拥挤 */
}

/* 让描述文本自动填充剩余空间 */
.cn-body .cn-description {
  flex: 1;
  min-width: 0; /* 解决长文本下Flex子元素不收缩的溢出问题 */
}

/* 固定按钮区域宽度，防止被挤压变形 */
.cn-body .cn-buttons {
  flex-shrink: 0;
}

关键逻辑说明 #

• flex-direction: row：将原来的纵向Flex容器改为横向，直接改变子元素的排列方向
• align-items: center：保证标题、文本、按钮在垂直方向对齐，避免出现高低错落的情况
• flex:1 赋值给描述文本：让它自动占据标题和按钮之外的所有可用空间，实现自适应布局
• flex-shrink:0 赋值给按钮容器：防止按钮在空间不足时被压缩变形
• min-width:0：解决长文本场景下Flex子元素无法收缩导致的容器溢出问题

响应式兼容（可选） #

如果需要在小屏幕设备上恢复纵向布局，添加媒体查询即可：

@media (max-width: 768px) {
  .cn-body {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 1rem;
  }
}

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