내비게이션 flexbox를 사용하여

Question

내가 가지고있는 문제 중 하나는 가로 방향 탐색 바를 사용하는 것입니다. flexbox를 사용하여 구현했습니다. 나는 각 플렉스 상자의 이해가 무엇에서 그것을 (보라색 테두리) 목록 항목 (검은 색 테두리가있는)에 정렬되지 않은 목록 컨테이너 내에서 유지하지 않는

를 축소 할 때해야한다고

나는이 탐색 모음을 flex 속성을 사용하여 부모 컨테이너 내에서 크기가 조절됩니다. 그러나 내 경우에는 목록 항목이 정렬되지 않은 목록 컨테이너 내에서 크기가 조정되지 않습니다. 여기

내 HTML 코드입니다 : 여기에 무슨 일이 일어나고 있는지의 사진이

nav.horizontalNavigation { 
 
    width: 100%; 
 
    padding: 0; 
 
    clear: both; 
 
} 
 

 
nav.horizontalNavigation ul { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    border: 3px solid purple; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav.horizontalNavigation>ul li { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    border: 2px solid black; 
 
    background-color: rgb(117, 140, 72); 
 
    font-size: 1.3em; 
 
    line-height: 2em; 
 
    text-transform: uppercase; 
 
    list-style-type: none; 
 
} 
 

 
nav.horizontalNavigation>ul li a { 
 
    flex: 1 1 auto; 
 
    display: block; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    color: white; 
 
}

<header> 
 

 
    <nav class="horizontalNavigation"> 
 
    <ul> 
 
     <li><a href="#ll_home.html">HOME</a></li> 
 
     <li><a href="#ll_services.html">SERVICES</a></li> 
 
     <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li> 
 
     <li><a href="#ll_contact.html">CONTACT US</a></li> 
 
     <li><a href="#ll_gallery.html">GALLERY</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</header>

Answer 1

확인이 밖으로, 당신은 모든 것을 저장할 수있는 충분한 공간이 필요 없다 한 줄에 포장해야합니다. 당신이 속는로 닫습니다 투표를 할 때

nav.horizontalNavigation { 
 
    width: 100%; 
 
    padding: 0; 
 
    clear: both; 
 
} 
 

 
nav.horizontalNavigation ul { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    border: 3px solid purple; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav.horizontalNavigation>ul li { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    border: 2px solid black; 
 
    background-color: rgb(117, 140, 72); 
 
    font-size: 1.3em; 
 
    max-width: 20%; 
 
    line-height: 2em; 
 
    text-transform: uppercase; 
 
    list-style-type: none; 
 
} 
 

 
nav.horizontalNavigation>ul li a { 
 
    flex: 1 1 auto; 
 
    display: block; 
 
    margin: auto; 
 
    text-align: center; 
 
    color: white; 
 
}

<header> 
 

 
    <nav class="horizontalNavigation"> 
 
    <ul> 
 
     <li><a href="#ll_home.html">HOME</a></li> 
 
     <li><a href="#ll_services.html">SERVICES</a></li> 
 
     <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li> 
 
     <li><a href="#ll_contact.html">CONTACT US</a></li> 
 
     <li><a href="#ll_gallery.html">GALLERY</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</header>