CSSフレックス根拠は、私がここにcodepenているIE

Question

上で動作していない - https://codepen.io/ttmtsimon/pen/jadyWW?editors=1100

を私はリンクや選択メニューで、シンプルなナビゲーションスタイルのレイアウトを持っています。小さい画面で

私は選択メニューが、私はフレックスとフレックス秩序や根拠を使用して、このworjingを持って

幅100％を底にそれ自身の上に座るとなりたいです。

私problenはIEは、layputは（私はIEへのアクセス権を持っていけないが、私が言われてきた）

私はそれがIEの基礎を処理する方法だと思うすべてでは動作しませんです。

フレックスを使用して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> 

Answer 1

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

スニペット