关于Flex布局，发现的问题

容器的align-content与项目的align-self

html

<div class="flex-test">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

css

.flex-test{
    width: 500px;
    height: 500px;
    border: 1px solid yellowgreen;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;  /* 多个主轴控制项目 */
}
.flex-test>div:nth-child(1){
    background-color: #e75252;
    width: 150px;
    height: 80px;
}
.flex-test>div:nth-child(2){
    background-color: #528ee7;
    width: 150px;
    height: 80px;
    align-self: center;		 /* 单个控制项目位置 */
}
.flex-test>div:nth-child(3){
    background-color: #1be971;
    width: 150px;
    height: 80px;
}
.flex-test>div:nth-child(4){
    background-color: #e3e636;
    width: 150px;
    height: 80px;
}
.flex-test>div:nth-child(5){
    background-color: #eb1fcf;
    width: 150px;
    height: 80px;
}

结果

容器的flex-wrap: wrap;与项目的align-self：center / flex-end

html

	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

css

.flex-test>div:nth-child(2){
    background-color: #528ee7;
    width: 150px;
    height: 80px;
    align-self: flex-end; /* 项目交叉轴居中 */
}

结果

第二块并没有在我们所想的在容器中间

css

.flex-test>div:nth-child(2){
    background-color: #528ee7;
    width: 150px;
    height: 80px;
    align-self: flex-end; /* 项目到交叉轴终点位置 */
}

第二块并没有在我们所想的在容器交叉轴尾部

换行后，就像是从我画的黑线位置截断了一样，上面是第一个主轴的交叉轴起始到结束，下面是第二个主轴的交叉轴起始到结束

百思不得其解，望有大神看到，能解释一下，谢谢！

后面我把上中下分成三块，能够实现想筛子一样的5点，但是，总想在一个容器里就解决它。望大神解答萌新。