Responsive Navigation mit Flex&Target

[ShareThePain]

Ich verstehe nicht wie ich Target für eine responsive Toggle-Navigation verwenden kann und was dabei im Hintergrund passiert. Kann mir jemand das anhand meines Codebeispieles erklären ?

<nav>
<div class="logo">test_nav</div>
<div class="nav_links">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
<a class="button" href="#">
<span class="bars"></span>
<span class="bars"></span>
<span class="bars"></span>
</a>
</nav>

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #191919;
color: #ccc;
}

.logo {
margin: .7rem;
}

.nav_links {
height: 100%;
}

.nav_links ul {
display: flex;
margin: 0;
padding: 0;
}

.nav_links li a {
display: block;
text-decoration: none;
padding: 1rem;
}

.nav_links li {
list-style: none;
}

.button {
position: absolute;
display: none;
top: 1rem;
right: 1rem;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.bars {
height: 3px;
width: 100%;
background-color: #ccc;
}


/*responsive Elemente*/

@media only screen and (max-width: 800px) {

nav  {
flex-direction: column;
align-items: flex-start;
}

.button {
display: flex;
}

.nav_links {
display: none;
}


}