フレックスボックス：最後のナビゲーションリスト項目が新しい行に移動する

Question

同じ行にあるナビゲーションバーを作成しようとしています。私はフレックス方向：行を使用してみました。すべてのリスト項目をインラインにしますが、機能しませんでした。何か案は？メニューは2行に来るべきではない場合

@media (min-width: 900px) { 
 
    .main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    } 
 
    .logo-name { 
 
    margin-left: 1%; 
 
    } 
 
    .main-nav { 
 
    display: flex; 
 
    background-color: orange; 
 
    } 
 
    .main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    } 
 
}

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </nav> 
 
</header>

Answer 1

あなたはflex-wrap: no-wrap;を使用することができます。

.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.logo-name { 
 
    margin-left: 1%; 
 
} 
 

 
.main-nav { 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: no-wrap; 
 
} 
 

 
.main-nav li { 
 
    padding: 0.3em; 
 
    list-style-type: none; 
 
}

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </nav> 
 
</header>

Answer 2

問題は自分のCSSコードは、その後、すべてがうまくいく@media (min-width: 900px)ブロックの外に移動し、@media (min-width: 900px)です。小さな問題あなたは、意味的に間違っているnavタグ内に無効なマークアップをliタグを定義しているされて、あなたはulタグ

@media (min-width: 100px) { 
 
    
 
} 
 
.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    } 
 
    .logo-name { 
 
    margin-left: 1%; 
 
    } 
 
    .main-nav { 
 
    display: flex; 
 
    list-style-type: none; 
 
    background-color: orange; 
 
    } 
 
    .main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    }

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <ul class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </ul> 
 
</header>