Flexbox distributed menu

CSS

* { box-sizing: border-box; }
ul.flex-root-ul {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0;
}
ul.flex-root-ul li {
list-style-type: none;
margin: 0px;
flex-basis: auto;
display: flex;
flex-basis: 33.333%;
flex-direction: column;
flex-grow: 1;
text-align: center;
}
ul.flex-root-ul a {
display: block;
text-decoration: none;
padding: 1em;
background-color: #FFF;
color: #000;
box-shadow: 0px 0px 1px rgba(0,0,0,0.75);
transition: all ease-in .175s;
}
ul.flex-root-ul a:hover {
background-color: #222;
color: #FFF;
}
@media only screen and (min-width: 0px) and (max-width: 1000px) {
ul.flex-root-ul li { flex-basis: 33.333%; }
.content {border-radius: 0px;}
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
ul.flex-root-ul li { flex-basis: 100%; }
}

Markup

<ul class="flex-root-ul" aria-label="Navigation Menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Number 5</a></li>
<li><a href="#">Menu Item 6</a></li>
</ul>