flexbox mobile first menu issue - html

Question

I have tried to emulate the excellent flexbox tutorials by Wes Bos. I wanted to convert one specific tutorial he has on responsive flexbox menu. But I wanted my menu to be done with mobile first so I did my media queries with min-width.
But I am not able to make it work properly on the default mobile layout. In the menu created by Wes, the li items are stacked upon each other and the social icons at the bottom have flex:1 1 25%. But my social icons are also stacked.
On the other breakpoints my layout follows the one that Wes created.
I have set up a codepen for my code.
.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;
}
}

Answer 1

This is your default code (no media queries applied):
.flex-nav ul {
display: flex;
flex-direction: column;
}
.flex-nav .social {
flex: 1 1 25%;
}
Yes, you've given each social media icon a flex-basis: 25%.
BUT, your container is flex-direction: column.
So the flex rule applied to your social media icons works vertically, not horizontally.
Consider this method instead:
.flex-nav ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: 0 0 100%; /* sized to fit one item per row */
}
.flex-nav .social {
flex: 0 0 25%; /* sized to fit four items per row */
}
revised demo

Answer 2

I've created a container for the social links so it's more easy (at least for me) structure the menu.
SEE IN CODEPEN
Here the html:
<div class="wrapper">
<nav class="flex-nav">
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
<li>item04</li>
<li>item05</li>
<li>item06</li>
<div class="social-container">
<li class="social"><i class="fa fa-gift"></i></li>
<li class="social"><i class=" fa fa-glass"></i></li>
<li class="social"><i class=" fa fa-calendar"></i></li>
<li class="social"><i class=" fa fa-cutlery"></i></li>
</div>
</ul>
</nav>
</div>
CSS:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
}
a {
color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition: all 0.5s;
}
a:hover {
background: rgba(0, 0, 0, 0.3);
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 50px;
}
.flex-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%; /* ADDED */
}
.flex-nav .social {
flex: 1 1 25%;
}
.social-container { //just make it flex container
display: flex;
width: 100%;
}
#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: 1;
}
.flex-nav .social {
/*flex: 1;*/
}
.social-container {
flex: 2; /* set the value as many as you want */
}
.flex-nav ul { //change the direction
flex-direction: row;
flex-wrap: no-wrap;
}
}