CSS 플렉스으로 내가 여기 codepen 한 IE

https://codepen.io/ttmtsimon/pen/jadyWW?editors=1100 내가 간단한 탐색 스타일의 레이아웃을 링크하고 선택 메뉴. 작은 화면에서

나는 선택 메뉴가 내가 플렉스와 플렉스 질서와 기준을 사용하여이 worjing이

폭이 100 %를 바닥에 그 자체에 앉아서되고 싶어요.

내 problen는 IE에서, layput (나는 IE에 액세스 할 필요 없다, 그러나 나는 들었다)

나는 그것이 IE는 기초를 처리하는 방식이라고 생각 전혀 작동하지 않는 것입니다.

flex를 사용하여 IE에서 작동하도록이 레이아웃을 수정하는 방법이 있습니까?

<section class="nav-bar"> 

    <div class='o-container '> 

     <div class='nav-bar__items'> 

      <div class="nav-bar__items-linkOne"> 
       <div class=""> 
        <span>Link One</span> 
       </div> 
      </div> 

      <div class="nav-bar__items-linkTwo"> 
       <span>Link Two</span> 
      </div> 

      <div class="nav-bar__items-linkThree">     
       <span class="o-svg-text__text-left">Link Three</span> 
      </div> 

      <div class="nav-bar__items-select"> 
       <div> 
       <span>Select: </span> 
        <select> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
        </select> 
       </div> 
      </div> 

     </div> 

    </div> 

</section>

출처

2017-12-02 ttmt

&__items 규칙에서 justify-content: flex-end; 만 제거하면됩니다.

이유는 IE가 justify-content과 자동 여백을 결합 할 때 맘에 들지 않기 때문입니다.이를 제거하면 잘 교차하는 브라우저가 작동합니다.

Updated codepen

스택

.o-container { 
 
    width: 90%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.nav-bar { 
 
    background-color: lightgreen; 
 
    padding: 16px 0; 
 
    width: 100%; 
 
} 
 
.nav-bar__items { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    /* justify-content: flex-end;    removed */ 
 
    min-height: 40px; 
 
} 
 
.nav-bar__items-linkOne { 
 
    margin-right: auto; 
 
} 
 
.nav-bar__items-linkThree, .nav-bar__items-linkTwo { 
 
    padding-left: 8px; 
 
} 
 
.nav-bar__items-linkTwo { 
 
    padding-right: 8px; 
 
    margin-left: 20px; 
 
} 
 
.nav-bar__items-select { 
 
    display: block; 
 
    flex-basis: 100%; 
 
    margin-top: 20px; 
 
} 
 
.nav-bar__items-select select { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 1366px) { 
 
    .o-container { 
 
    max-width: 1366px; 
 
    } 
 
} 
 
@media (min-width: 918px) { 
 
    .nav-bar { 
 
    order: 1; 
 
    padding: 10px 0; 
 
    } 
 
    .nav-bar__items { 
 
    order: 1; 
 
    } 
 
    .nav-bar__items-linkThree, .nav-bar__items-linkTwo { 
 
    order: 3; 
 
    } 
 
    .nav-bar__items-linkTwo { 
 
    order: 3; 
 
    } 
 
    .nav-bar__items-linkThree { 
 
    order: 4; 
 
    } 
 
    .nav-bar__items-select { 
 
    flex-basis: auto; 
 
    order: 2; 
 
    margin-top: 0; 
 
    } 
 
    .nav-bar__items-select select { 
 
    width: 350px; 
 
    } 
 
}

<section class="nav-bar"> 
 

 
    <div class='o-container '> 
 
     
 
     <div class='nav-bar__items'> 
 

 
      <div class="nav-bar__items-linkOne"> 
 
       <div class=""> 
 
        <span>Link One</span> 
 
       </div> 
 
      </div> 
 

 
      <div class="nav-bar__items-linkTwo"> 
 
       <span>Link Two</span> 
 
      </div> 
 

 
      <div class="nav-bar__items-linkThree">     
 
       <span class="o-svg-text__text-left">Link Three</span> 
 
      </div> 
 

 
      <div class="nav-bar__items-select"> 
 
       <div> 
 
       <span>Select: </span> 
 
        <select> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</section>

니펫을

출처

2017-12-02 15:19:02 LGSon

CSS 플렉스으로 내가 여기 codepen 한 IE

답변

관련 문제