使弹性项目彼此靠近

Question

how it looks

我需要使描述更接近学生姓名，Student_comment 目前在 display flex 和 flex direction row 但我需要将描述放在顶部，以便更接近日期和学生姓名，我尝试了填充和边距，但没有奏效。这是我的代码：

 .Student_Comment1 {
  display: flex;
  flex-direction: row;
}

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

.StudentComment_Description {
  padding-left: 3.7vw;
  padding-bottom: 1vw;
}

.Student_CommentDate {
  padding-left: 1.5vw;
  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;
}

<div class="StudentComments_DashBoard">
    <div class="StudentCom_DashBoard">
       <div class="Student_Comment1">
          <span class="dotForStudent"></span>
          <div class="StudentName_Comment">
            Student Name
          </div>
          <div class="Student_CommentDate">
            &nbsp; May 11, 2021
          </div>
       </div>
       <div class="StudentComment_Description">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum ?
       </div> 
    </div>
 </div>

Answer 1

将align-items: flex-end; 添加到您的Student_Comment1 类CSS

.Student_Comment1 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}