嵌套盒子Flex布局问题：适配不同屏幕尺寸的两个难点

下面直接解决你遇到的两个问题：

问题1：内盒对齐外盒右侧居中 #

给外层容器.inline-block-buttons设置Flex布局，通过justify-content: space-between实现左右元素分布，align-items: center保证按钮垂直居中。

问题2：响应式布局切换 #

在小屏幕（≤400px）下，将Flex方向改为垂直列，同时设置justify-content: flex-end让按钮落到外盒底部，配合min-height确保外盒有足够高度支撑布局。

修改后的完整代码 #

HTML（无需修改）

<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>

CSS

body {
  margin: 2rem;
}

p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 0.25rem;
}

.inline-block-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px; /* 保证小屏幕下外盒高度足够 */
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 2px;
}

@media (max-width: 400px) {
  .inline-block-buttons {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; /* 文本靠左对齐 */
  }
  
  .inline-block-buttons a {
    align-self: stretch; /* 按钮占满宽度，可选 */
    margin: 1rem 0;
  }
}

核心修正点 #

• 原代码未给外层容器设置display: flex，导致Flex相关属性完全无效
• Flex中没有align-self: right这个值，正确的方向控制应该通过父级的justify-content实现
• 媒体查询中补充了justify-content: flex-end，确保小屏幕下按钮落到底部，同时修复了原代码未闭合的媒体查询括号问题

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