body에 flex를 주면(?) hover 기능이...

화면 중앙정렬을 할 때 저는 position이 아닌, body에 flex 를 넣는 방법을 이용하였는데요, 완성본을 만져보던 도중 a태그버튼을 건드리려 커서를 내리는 순간 .back 구간?에서 자꾸 hover 가 풀려요ㅠ

position 을 이용해서 중앙정렬을 다시 했더니 잘 작동되는데 왜이럴까요..?

body{
    line-height: 1.5em;
    background-color: #222;
    font-family: 'Arial';
    font-weight: 300;
    margin: 0;
    color: white;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

a{
    text-decoration: none;
    color: inherit;
}

.items{
    display: flex;
    width: 1300px;
    /* border: 1px solid rgb(79, 93, 211); */
    justify-content:center;
    text-align: center;
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
}

.item{
    width: 300px;
    height: 200px;
    margin: 15px;
    /* border: 1px solid; */
    /* display: inline-block; */
    position: relative;
}

.front{
    height: inherit;
    /* border: 1px solid red; */
    background-color: #333;
    width: 100%;
}

.item:hover .front img{
    animation: ani 0.8s infinite;
}

.front h2{
    margin-top: 0px;
}

.front,
.back{
    position: absolute;
    transition: 0.4s;
    top:0;
}

.back{
    background-color: #fff;
    color: black;
    height: inherit;
    /* border: 1px solid; */
    box-sizing: border-box;
    padding: 20px;
    z-index:-1;
    opacity: 0;
}

.back p{
    margin-top: 5px;
}

.back a{
    background-color: yellowgreen;
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    transition: 0.3s;
}

.back a:hover{
    background-color: rgb(119, 159, 39);
}

.item:hover .front{
    top: -50%;
}

.item:hover .back{
    top: 50%;
    opacity:1;
}

@keyframes ani{
    50%{
        transform:scale(1.2);
    }
}