フレックスボックスのモバイルファーストメニューの問題

Question

私はWes Bosの優れたフレックスボックスチュートリアルをエミュレートしようとしました。私は彼が応答フレックスボックスのメニューにある特定のものをtutorialに変換したいと思っていました。しかし、私は自分のメニューをモバイルで最初にやりたかったので、私はmin-widthでメディアの質問をしました。

しかし、デフォルトのモバイルレイアウトでは正しく動作させることができません。 Wesによって作成されたメニューでは、liアイテムは互いに積み重なっており、下部にあるソーシャルアイコンはflex:1 1 25%です。しかし、私のソーシャルアイコンも積み重ねられています。

他のブレークポイントでは、私のレイアウトはWesが作成したレイアウトに従います。

私のコードに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; 
    } 
} 

Answer 1

これは、あなたのデフォルトのコード（適用されていないメディアクエリ）：

.flex-nav ul { 
    display: flex; 
    flex-direction: column; 
} 

.flex-nav .social { 
    flex: 1 1 25%; 
} 

はい、あなたは、各ソーシャルメディアのアイコンflex-basis: 25%を与えてくれました。

BUTの場合、コンテナはflex-direction: columnです。

したがって、ソーシャルメディアアイコンに適用されたflexルールは、水平方向ではなく垂直方向に機能します。

ではなく、この方法を検討してください。

.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

を、それは（少なくとも私にとっては）メニューを構築するより簡単ですので、私は社会的なリンクのためのコンテナを作成しました。 SEE IN CODEPENここ HTML：

<div class="wrapper"> 
<nav class="flex-nav"> 
    <ul> 
    <li><a href="#">item01</a></li> 
    <li><a href="#">item02</a></li> 
    <li><a href="#">item03</a></li> 
    <li><a href="#">item04</a></li> 
    <li><a href="#">item05</a></li> 
    <li><a href="#">item06</a></li> 
    <div class="social-container"> 
     <li class="social"><a href="#"><i class="fa fa-gift"></i></a></li> 
     <li class="social"><a href="#"><i class=" fa fa-glass"></i></a></li> 
     <li class="social"><a href="#"><i class=" fa fa-calendar"></i></a></li> 
     <li class="social"><a href="#"><i class=" fa fa-cutlery"></i></a></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; 

    } 
    }