Flex Cssを使用したナビゲーションバーのアライメントの固定

ナビゲーションバーのコンテンツの位置合わせを修正しようとしています。私は最初にナビゲーションバーをモバイル対応にしました。Flex Cssを使用したナビゲーションバーのアライメントの固定

.sidebar{ 
    position: fixed; 
    top:0; 
    left:-300px; 
    width: 300px; 
    height: 100vh; 
    background: #262626; 
    transition: 1s; 
    padding 20px; 
    text-align: center; 
    box-sizing: border-box; 
} 
.sidebar.active{ 
    left: 0px; 
} 

.menu-options a{ 
    color: #fff; 
    font-family: sans-serif; 
    text-decoration:none; 
    display: block; 
    padding: 10px 0px;; 
    margin: 6px 0px ; 
    text-transform: uppercase; 
    font-size: 18px; 
    transition: .5s; 

}

画面の幅が一定のサイズに達すると、ナビアイコン（ハンバーガーボタン）と画像を削除しようとします。私はその後、フレックスボックスを使用し、その間にスペースを入れるためにコンテンツを正当化しようとします。ここで

@media screen and (min-width:800px){ 

    .sidebar{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: flex; 
    width: 100%; 
    height: 7%; 
    justify-content: space-between 
    } 


    .menu-options{ 
    display: flex; 

    } 

    .menu-options a{ 

    padding: 10px 22px; 
    } 
    .social-icons{ 
    position: static; 
    width: auto; 

    } 

    .social-icons i{ 
    padding: 10px 22px; 
    } 



    .nav-icon, 
    .sidebar img{ 
    display: none; 
    } 

}

は、HTMLが

 <body> 
<header> 
    <!--  Nav icon--> 


     <!-- Mobile social media sidebar--> 
    <div class="sidebar"> 
    <div class="nav-icon"> 
     <div class="hamburger"></div> 
    </div> 
    <a href="#"><img src="images/wheel_img_web.png"></a> 
    <nav class ="menu-options"> 
     <a href="#">About</a> 
     <a href="#">Portfolio</a> 
     <a href="#">Contact</a> 
    </nav> 
    <!-- social media icons  --> 
    <nav class="social-icons"> 
     <i class="fa fa-linkedin" aria-hidden="true"></i> 
     <span class="sr-only"></span> 
     <i class="fa fa-github" aria-hidden="true"></i> 
     <span class="sr-only"></span> 
     <i class="fa fa-envelope" aria-hidden="true"></i> 
     <span class="sr-only"></span> 
    </nav> 
    </div> 
</header> 
    </body>

である私の目標は、右に左にメニューオプションとソーシャルメディアのアイコンを持つことです。何らかの理由でメニューオプションが整列しているように見えます。私はそれがまだハンバーガーとイメージを対象としているからだと信じています。私はDOMアイコン（ハンバーガー）とimgバナーをDOMから取り除くと、それが私がしたいことをするので、私はこの前提を持っています。この状況を解決するために私は何ができますか？また、このリンクにはより良い予告を与える可能性のある画像が含まれていますhttps://drive.google.com/drive/folders/1yx_VPB-P19rOwf9W66c-jVlJbCaI_04R?usp=sharing。おかげで

出典

2017-12-21 Nelson Rodriguez

我々はまた、ところで、これらのコードを組み合わせて、それがこれを行うには厳しいですが、私は刺しを取るよHTMLなくて –

のためのソリューションを把握するためにあなたのhtmlを必要としています。 .nav-icon、サイドバーimg {...} 'に' flex：none; 'を追加できますか？ –

@ SUB-HDR私は謝罪しました。私は今、より多くの視点を与えるためのリンクをHTMLに含めました。 –

あなたは、（1行だけ）を動作させるために、以下を追加したいと思うでしょう。これにより、フレックスチャイルド.menu-optionsは、文脈上利用可能なスペースを最大限にとるように強制されます。

@media screen and (min-width:800px) { 
    … 
    .menu-options { 
    … 
    flex-grow: 1; 
    } 
}

出典

2018-01-06 23:15:57

あなたはそれを釘付けにしました。うわー、どうもありがとう！ –

@NelsonRodriguez喜んで助けることができました。私の答えを受け入れる気になりますか？それが我々がこれをすることで報われる方法です。 –

私はあなたのためにそれをすることを喜んでいます。あなたにメッセージを送る方法はありますか？フィールドでのあなたの経験についていくつか質問したいと思います。ありがとう –

Flex Cssを使用したナビゲーションバーのアライメントの固定

答えて

関連する問題