flex布局下如何让学生评论描述更贴近上方姓名与日期

你目前的布局间距过大主要是两个原因：

1. Student_Comment1 设为横向flex布局后，圆点、学生姓名、日期三个元素是平级的flex子项，默认align-items: stretch会让三个子项高度都和最高的圆点（2.5em）保持一致，学生姓名和日期的文本都在各自高容器的顶部，导致整个Student_Comment1容器的底部远低于日期文本的底部
2. 圆点自带margin-top: 0.9vw也会撑高整个外层容器的高度，进一步拉大了和下方描述文本的间距

修改后的HTML代码 #

主要是把学生姓名和日期包裹在同一个信息容器内，作为flex的第二个子项，避免三个元素横向平级排列：

<div class="StudentComments_DashBoard">
    <div class="StudentCom_DashBoard">
       <div class="Student_Comment1">
          <span class="dotForStudent"></span>
          <!-- 新增信息容器包裹姓名和日期 -->
          <div class="student-info-wrap">
            <div class="StudentName_Comment">
              Student Name
            </div>
            <div class="Student_CommentDate">
              &nbsp; May 11, 2021
            </div>
          </div>
       </div>
       <div class="StudentComment_Description">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum ?
       </div> 
    </div>
 </div>

修改后的CSS代码 #

调整flex对齐方式，同时取消多余的间距：

.Student_Comment1 {
  display: flex;
  flex-direction: row;
  /* 新增：让flex子项顶部对齐，不再拉伸等高 */
  align-items: flex-start;
  /* 新增：控制整个行的底部间距，数值越小和下方描述的间距越近 */
  margin-bottom: 0.3vw;
}

.StudentComments_DashBoard {
  width: 80%;
  margin: auto;
  padding-top: 2vw;
}

.StudentComment_Description {
  padding-left: 3.7vw;
  padding-bottom: 1vw;
  /* 如果需要更紧凑的效果，可以取消下面注释调整负margin */
  /* margin-top: -0.2vw; */
}

.Student_CommentDate {
  padding-left: 0; 
  font-size: 0.9vw;
  padding-top: 0.3vw;
}

.StudentName_Comment {
  font-weight: 500;
  font-size: 1.3vw;
}

.dotForStudent {
  height: 2.5em;
  width: 2.5em;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: white;
  margin-top: 0.9vw;
  margin-right: 1vw;
}

如果需要进一步缩小间距，直接下调Student_Comment1的margin-bottom数值即可。

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