CSS flex基础不适用于IE [重复]

Question

我这里有一个密码笔 - https://codepen.io/ttmtsimon/pen/jadyWW?editors=1100

我有一个简单的导航样式布局，带有链接和选择菜单。

在较小的屏幕上，我希望选择菜单位于底部并保持 100% 的宽度

我有这个使用 flex 和 flex order 和 base 的工作。

我的问题是 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>

Answer 1

只需从 &__items 规则中删除 justify-content: flex-end;。

原因是 IE 不喜欢将justify-content 和自动边距组合在一起，所以通过删除它，它可以跨浏览器正常工作。

Updated codepen

堆栈sn-p

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