如何实现通知组件时间与删除按钮div上下依次排列

问题原因 #

实现不了上下排列是两处样式设置错误导致的：

• 包裹时间和删除按钮的.notificationlist__time类设置了display: flex，flex布局默认沿水平方向排列子元素，直接把时间文本、删除按钮挤成了左右并排结构
• 给.delete__button添加的float: left属于无效冗余代码，flex容器内的子元素浮动属性不会生效。

修改方法 #

只需要调整.notificationlist__time的样式，将flex主轴改为纵向，删除冗余的浮动属性即可：

.notificationlist__time{
  display: flex;
  flex-direction: column; // 将排列方向改为纵向，实现上下排布
  align-items: flex-start; // 控制子元素左对齐，可根据设计需求调整为center等属性
  gap: 6px; // 可选：设置时间和删除按钮的间距，优化视觉效果
  .delete__button {
    // 删除原有的 float: left; 代码即可
  }
}

如果不需要用flex控制间距，也可以直接删掉.notificationlist__time上的display: flex属性，块级元素默认会让内部子元素按上下结构排列，同样能实现需求，只是间距调整不如flex灵活。

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