详情效果

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