为何管理员面板消息列表水平显示？如何转为垂直样式？

• 核心问题出在.user-list的display: inline设置：行内元素的特性会让其内部的子元素（消息列表项）默认在同一行水平排列，这就是管理员仪表板列表水平显示的根本原因。
• .users-list a的flex布局仅作用于列表项内部的内容布局，并非列表整体水平排列的主因。

修改.user-list的display属性，将行内元素改为块级元素，即可让列表自动垂直堆叠：

.user-list{
  display: block; /* 替换原有的inline */
}

.users header,
.users-list a{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;
}

如果列表项仍有异常，可额外添加样式强制列表项为块级：

.user-list > li {
  display: block;
  width: 100%;
}

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