flexbox移動第一個菜單問題

Question

我試圖效仿Wes Bos的flexbox教程。我想轉換一個特定的tutorial他在響應式flexbox菜單上。但我希望我的菜單可以先用手機完成，因此我使用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%。

但是，您的容器是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; 

    } 
    }