使用flexbox布局实现多行文本在父容器底部区域顶部对齐的问题咨询

解决方案 #

你现有代码的核心问题是选择器匹配错误、多余属性干扰导致的，按以下修改即可实现需求：

1. 修正CSS选择器错误：你CSS中写的.li是类选择器，但HTML里的<li>是标签元素，没有添加li类，导致li的flex布局样式完全不生效
2. 移除给.expert-wrap加的align-self: flex-end属性：该属性会让容器收缩宽度、对齐到水平右侧，导致内部文本换行后呈现尾部对齐的效果
3. 补充盒模型配置避免宽度溢出

修改后完整CSS如下：

/* 重置ul默认样式 */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 匹配HTML中的li标签，之前的.li是错误写法 */
.team li {
  width: 25%;
  padding: 10px;
  box-sizing: border-box; /* 避免padding撑宽容器，导致一行放不下4个元素 */
  display: flex;
  flex-direction: column;
}

/* 保留该属性，作用是把expert-wrap整体推到li的底部 */
.expert-wrap {
  margin-top: auto;
}

/* 内部文本默认就是顶部左对齐，可加该属性明确规则 */
.expertise-keywords {
  text-align: left;
}

修改完成后，每个li的flex纵向布局生效，margin-top: auto会将.expert-wrap整体贴合到li的底部，同时.expert-wrap宽度和li保持一致，内部的多行文本会默认从顶部开始排列，完全符合你的预期效果。

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