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; 

}

화면의 너비가 특정 크기에 도달하면 nav 아이콘 (햄버거 버튼)과 이미지를 제거하려고합니다. 그런 다음 flex 상자를 사용하여 중간에 공간을두기 위해 내용을 정당화합니다.

@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; 
    } 

}

여기

 <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>

내 목표는 오른쪽으로 왼쪽에있는 메뉴 옵션 및 소셜 미디어 아이콘이되는 HTML을합니다. 어떤 이유로 메뉴 옵션이 가운데 정렬 된 것처럼 보입니다. 나는 그것이 여전히 햄버거와 이미지를 대상으로보고 있기 때문에 그것이라고 믿습니다. 나는 nav-icon (햄버거)과 img 배너를 DOM에서 제거 할 때 그것이 원하는 것을 수행하기 때문에 나는이 가정을 가지고 있습니다. 이 상황을 해결하기 위해 무엇을 할 수 있습니까? 또한이 링크에는 더 나은 사전 정보가 포함될 수도 있습니다 (https://drive.google.com/drive/folders/1yx_VPB-P19rOwf9W66c-jVlJbCaI_04R?usp=sharing). 감사합니다.

출처

2017-12-21 Nelson Rodriguez

우리는 또한 BTW 그 코드를 결합하고 이렇게 힘든 년대 HTML없이 당신 –

에 대한 해결책을 알아 내기 위해 당신의 HTML이 필요합니다,하지만 난 자상 할게요. .nav-icon, 사이드 바 img {...}'에'flex : none;'을 추가 할 수 있습니까? –

@ SUB-HDR 죄송합니다. 더 많은 관점을 제공하는 링크가 포함 된 HTML이 포함되었습니다. –

다음을 추가하여 한 줄만 입력하면됩니다. 이렇게하면 flex 자식 인 .menu-options이 문맥 상 가장 많은 공간을 차지하게됩니다.

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

출처

2018-01-06 23:15:57

당신은 그것을 못 박았습니다. 와우 대단히 감사합니다! –

@NelsonRodriguez 기꺼이 도와 드릴 수 있습니다. 내 대답을 받아들이시겠습니까? 이것이 우리가이 일을하면서 보상받는 방식입니다. –

나는 그것을 위해 당신을 위해 행복하게 할 수있다. 내가 당신에게 메시지를 보낼 수있는 방법이 있습니까? 현장에서의 경험에 대해 몇 가지 질문을하고 싶습니다. 감사합니다 –

Flex Css를 사용하여 탐색 막대 맞춤 고정

답변

관련 문제