flex布局第二行数据两侧对齐问题

问题描述

使用flex布局时经常会遇到这种情况

第二行只有两个数据，导致两侧对齐了。而我们预期的一般是这样子的

如何解决？

:after伪元素的妙用，在元素之后添加内容。

.instance-card-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 10px;
  background: #f2f2f2;

  // 这里使用伪元素
  &::after {
    content: '';
    width: 400px;
  }

  .work-flow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;
    width: 400px;
    height: 170px;
    padding: 20px;
    background: #fff;
   }
}

参考博客：https://www.cnblogs.com/cyh-blogs/p/12981891.html