如何用Flex布局实现文本块固定在Item右下角并适配响应式

直接上可行的实现方式，核心是利用Flex的margin:auto特性，让intro自动定位到容器的右下角，同时完全遵守item的内边距规则：

基础结构 #

<div class="item">
  <!-- 这里放item里的其他内容，比如图片、描述文本等 -->
  <p>item内的其他内容...</p>
  
  <div class="intro">
    <h3>标题</h3>
    <p>这是intro的文本内容，会紧贴item的右下角</p>
  </div>
</div>

CSS实现 #

.item {
  /* 给item设置需要的内边距 */
  padding: 24px;
  /* 关键：开启Flex布局 */
  display: flex;
  /* 设置垂直方向排列，让内容从上到下分布 */
  flex-direction: column;
  /* 给item设置最小高度，确保intro有足够空间定位（根据你的需求调整） */
  min-height: 350px;
  /* 可选：添加边框方便看效果 */
  border: 1px solid #eee;
}

.intro {
  /* 核心技巧：自动margin让元素向右下角对齐 */
  margin-top: auto;
  margin-left: auto;
  /* 可选：限制intro的最大宽度，避免太宽影响布局 */
  max-width: 280px;
}

原理说明 #

• Flex容器（.item）设置flex-direction: column后，主轴变为垂直方向，margin-top: auto会让intro占据上方所有剩余空间，从而被推到容器底部；
• margin-left: auto则让intro在水平方向被推到容器右侧，刚好落在item的内边距范围内；
• 这种流式布局完全跟随容器尺寸变化，不会像absolute定位那样出现偏移问题——容器缩小或放大时，intro始终保持在右下角的padding区域内。

如果你的item不需要固定最小高度也能使用这个方案：只要容器内的内容高度小于容器高度，intro就会自动贴到右下角；如果内容高度超过容器，intro会被挤到内容下方，依然保持右对齐，这是比absolute更友好的自适应表现。

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