详情效果

flex常用： 横排 {
  display: flex;
  flex-direction: row;
  margin: 0;
}
竖排 {
  display: flex;
  flex-direction: column;
}
上下左右居中 {
  display: flex;
  justify-content: center;
  align-items: center;
}
竖居中 {
  display: flex;
  align-items: center;
}
横居中 {
  display: flex;
  justify-content: center;
}
两端对齐 {
  display: flex;
  justify-content: space-between;
}
每个项目两侧的间隔相等 {
  display: flex;
  justify-content: space-around;
}
两行文本溢出隐藏省略 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
一行文本溢出隐藏 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}