flex-direction:column(主轴方向为竖直方向)

.father{
    display:flex;
    justify-content: space-around;
    align-items:center/flex-start/flex-end;
    flex-direction:column;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-direction:column-reverse

.father{
    display:flex;
    justify-content: space-around;
    align-items:center;
    flex-direction:column-reverse;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-direction:row(此时主轴方向为水平方向)

.father{
    display:flex;
    justify-content: space-around;
    align-items:center/flex-start/flex-end;
    flex-direction:row;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-direction:row-reverse

.father{
    display:flex;
    justify-content: space-around;
    align-items:center;
    flex-direction:row-reverse;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-wrap:nowrap

.father{
    display:flex;
    justify-content: space-around;
    align-items:center;
    flex-wrap:nowrap;
    flex-direction:row;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-wrap:wrap

.father{
    display:flex;
    justify-content: space-around;
    align-items:center;
    flex-wrap:wrap;
    flex-direction:row;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

flex-wrap:wrap-reverse;

.father{
    display:flex;
    justify-content: space-around;
    align-items:center;
    flex-wrap:wrap-reverse;
    flex-direction:row;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}

align-items:center/stretch/baseline

.father{
    display:flex;
    justify-content: space-around;
    align-items:center/stretch/baseline;
    flex-wrap:wrap-reverse;
    flex-direction:row;
    border:5px dashed white;
    height:400px;
    width:400px;
}
.son{
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    border:2px solid white;
    width:100px;
    font-weight:bolder;
    font-size:16px;
    color:white;
}