列表最后一项靠右对齐

问题起因

最近碰到一个样式修改问题，查询表单可以折叠，并且查询按钮需要靠右对齐，准备用flex实现，省事，然后碰到多列时，使用 justify-content: space-between; 虽然会两端对齐，多列时就会出现一些问题最后一列间距会和上面不一致如下图，这个行不通了

解决办法

最后网上搜搜，发现不使用justify-content: space-between;时flex布局列表最后一项使用margin-left: auto;就可以靠右对齐了，不考虑多列结束位置不对齐问题，查询表单项间距相同即可

.test-container {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    /* 主轴从flex-start排列 */
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .item-container {
        width: 300px;
        height: 60px;
        line-height: 60px;
        border: 1px solid blue;
        margin-right: 7px;
        &:last-child {
            margin-left: auto;
        }
    }
}

效果如下图