Make Menu Responsive - Flex

Question

J'essaie de rendre ce menu réactif en utilisant Flexbox et je ne peux pas pour la vie de moi voir ce que je fais mal. Je veux que les options de menu s'empilent les unes les autres en mode mobile. Je suis d'accord en utilisant Flex mais je ne peux pas trouver l'erreur ici. Toute aide est appréciée!

Voici un lien vers le code: code

CSS:

.tabs-menu { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: auto; 
 
    padding: 5px; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .3); 
 
} 
 

 
.w-tab-menu { 
 
    position: relative; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
div { 
 
    display: block; 
 
} 
 

 
.tabs { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    margin-top: 20px; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 

 
.tab-link.w--current { 
 
    border-radius: 3px; 
 
    background-color: #00713e; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.w-tab-link.w--current { 
 
    background-color: rgba(40, 136, 55, .73); 
 
} 
 

 
.tab-link { 
 
    background-color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #5d5d5d; 
 
    font-weight: 600; 
 
} 
 

 
.w-tab-link { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    padding: 9px 30px; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    color: #5d5d5d; 
 
    background-color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.w-inline-block { 
 
    max-width: 100%; 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    color: #288837; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    background-color: transparent; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

HTML:

<div class="tabs-menu w-tab-menu"> 
    <a data-w-tab="Tab 1" class="tab-link w-inline-block w-tab-link w--current"> 
    <div>Baby and Children</div> 
    </a> 
    <a data-w-tab="Tab 2" class="tab-link w-inline-block w-tab-link"> 
    <div>Camo Gear</div> 
    </a> 
    <a data-w-tab="Tab 3" class="tab-link w-inline-block w-tab-link"> 
    <div>Boots</div> 
    </a> 
    <a data-w-tab="Tab 4" class="tab-link w-inline-block w-tab-link"> 
    <div>Gifts</div> 
    </a> 
    <a data-w-tab="Tab 5" class="tab-link w-inline-block w-tab-link"> 
    <div>Home Decor</div> 
    </a> 
    <a data-w-tab="Tab 6" class="tab-link w-inline-block w-tab-link"> 
    <div>Sports Goods</div> 
    </a> 
    <a data-w-tab="Tab 7" class="tab-link w-inline-block w-tab-link"> 
    <div>Work Wear</div> 
    </a> 
</div> 

Answer 1

Utilisez une requête de support pour la taille de votre écran préféré et cibler le .tabs-menu et faire un flex-direction: column j'ai ajouté un flex-wrap:wrap sur la seule règle de sorte qu'ils vont s'effondrer une fois qu'ils sont redimensionnées. J'espère que cela aide.

Fiddle

.tabs-menu { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: auto; 
 
    padding: 5px; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .3); 
 
    flex-wrap: wrap /*Added*/ 
 
} 
 

 
.w-tab-menu { 
 
    position: relative; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
div { 
 
    display: block; 
 
} 
 

 
.tabs { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    margin-top: 20px; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 

 
.tab-link.w--current { 
 
    border-radius: 3px; 
 
    background-color: #00713e; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.w-tab-link.w--current { 
 
    background-color: rgba(40, 136, 55, .73); 
 
} 
 

 
.tab-link { 
 
    background-color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #5d5d5d; 
 
    font-weight: 600; 
 
} 
 

 
.w-tab-link { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-decoration: none; 
 
    padding: 9px 30px; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    color: #5d5d5d; 
 
    background-color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.w-inline-block { 
 
    max-width: 100%; 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    color: #288837; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    background-color: transparent; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
@media screen and (max-width: 420px){ 
 
    .tabs-menu{ 
 
    flex-direction: column; 
 
    } 
 
}

<div class="tabs-menu w-tab-menu"><a data-w-tab="Tab 1" class="tab-link w-inline-block w-tab-link w--current"><div>Baby and Children</div></a><a data-w-tab="Tab 2" class="tab-link w-inline-block w-tab-link"><div>Camo Gear</div></a><a data-w-tab="Tab 3" class="tab-link w-inline-block w-tab-link"><div>Boots</div></a><a data-w-tab="Tab 4" class="tab-link w-inline-block w-tab-link"><div>Gifts</div></a><a data-w-tab="Tab 5" class="tab-link w-inline-block w-tab-link"><div>Home Decor</div></a><a data-w-tab="Tab 6" class="tab-link w-inline-block w-tab-link"><div>Sports Goods</div></a><a data-w-tab="Tab 7" class="tab-link w-inline-block w-tab-link"><div>Work Wear</div></a></div>