I attempted to replicate the fantastic flexbox tutorials by Wes Bos. I aimed to adapt a particular tutorial he presented on creating a responsive flexbox menu. However, my approach was to design the menu with a mobile-first perspective, utilizing media queries based on min-width.
Unfortunately, I encountered issues getting it to function correctly on the initial mobile layout. In Wes' menu, the list items stack on top of each other while the social icons at the bottom have flex: 1 1 25%. Yet in my version, even the social icons are stacked.
As for other breakpoints, my layout aligns with what Wes established.
I have shared my code through a codepen.
.flex-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.flex-nav .social {
flex: 1 1 25%;
}
@media all and (min-width:500px) {
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav ul {
flex-wrap: wrap;
flex-direction: row;
}
.flex-nav ul {
border: 1px solid black;
}
}
@media all and (min-width:800px) {
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
}