web-dev-qa-db-ja.com

Flexbox IE11での配置

添付のCodepenで、ヘッダーのロゴアイコンとメニューアイコンを揃えるためにFlexboxを使用していることがわかります。ロゴは左に揃え、メニューアイコンは右に揃える必要があります（他の要素があります）ただし、これはデモンストレーション用の単純化されたバージョンです）。

IE11でテストすると、Flexboxが機能していないことがわかります。ドキュメントでわかる限り、IE11はこれをサポートしているはずです。他のFlexbox要素。これも機能していません。

ご覧のとおり、IE10にはプレフィックスが追加されています。

誰かが私がここでどこが間違っているのか教えてもらえますか？

https://codepen.io/anon/pen/EWqvNv

CSSは次のとおりです。

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}           

.nav-logo {
    margin-right: auto; 
}
cssinternet-explorerflexbox
3
ccdavies

IE11はかなりバグがあるため、justify-content: flex-end;を削除すると、意図したとおりに機能します。

更新されたcodepen

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-logo {
  margin-right: auto;
  width: 100px;
  height: 50px;
  background: #000;
}
<html>

<head></head>

<body>

  <header>

    <div class="container">

      <a class="nav-logo" href=""></a>

      <a class="nav-toggle" href="#">Menu</a>

    </div>

  </header>

</body>

</html>

サイドノート：

上記の左から右へのフロー（省略されたjustify-contentのデフォルトはflex-start）に基づいて、代わりにmargin-left: autoでnav-toggleを使用します サンプルコードペン

3
LGSon

設定justify-content: space-betweenは機能しているようです。使ってみませんか？

1
redOctober13

申し訳ありませんが、 https://caniuse.com/#search=justify-content を見ると、IEがこのメソッドをサポートしていないことは明らかです。 IEでその問題を修正するには、次のように追加のcssを使用できます。

.container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
  position: relative;
    @supports(justify-content: space-between) {
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
    }
}                   

.nav-logo {
        margin-right: auto;
  width: 100px;
  height: 50px;
  background: #000;
}

.nav-toggle {
  position: absolute;
  right: 0;
  top: 0;
  @supports(justify-content: space-between) {
    position: unset;
  }
}
<html>
        
        <head></head>
        
        <body>
                
                <header>
        
                        <div class="container">
                                        
                                <a class="nav-logo" href=""></a>
        
                                <a class="nav-toggle" href="#">Menu</a>
                                
                        </div>
                                        
                </header>
                        
        </body>
        
</html>
0
Jarek