web-dev-qa-db-ja.com

Flexbox IEの垂直方向の中央にない

私は、ページの中心にあるいくつかのLipsumコンテンツを含むシンプルなWebページを持っています。このページは、ChromeおよびFirefoxで正常に機能します。ウィンドウのサイズを小さくすると、コンテンツはウィンドウがいっぱいになるまでいっぱいになり、スクロールバーが追加されて、画面外の下部に向かってコンテンツがいっぱいになります。

ただし、ページはIE11の中央にはありません。体を曲げることでページをIEの中央に配置することができますが、そうすると、コンテンツは画面の上部に向かって表示されなくなり、コンテンツの上部が切り取られます。

以下に2つのシナリオを示します。関連するフィドルを参照してください。問題がすぐに明らかにならない場合は、結果ウィンドウのサイズを小さくして、スクロールバーの生成を強制します。

注：このアプリケーションは、Firefoxの最新バージョンChromeおよびIE（IE11）のみを対象としています。これらはすべて Flexboxの推奨勧告 をサポートしています。機能の互換性は問題になりません（理論上）。

Edit：Fullscreen APIを使用して外部divをフルスクリーンすると、すべてのブラウザーは元のCSSを使用して正しく中央に配置されます。ただし、フルスクリーンモードを終了すると、IEは水平方向の中央に配置され、垂直方向の上部に配置されます。

Edit：IE11は、ベンダー固有ではないFlexboxの実装を使用します。 フレキシブルボックス（ "Flexbox"）レイアウトの更新

Chrome/FFで正しく中央揃えおよびサイズ変更されますが、IE11では中央揃えではなく正しくサイズ変更されます

フィドル： http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

どこでも正しく中央に配置され、サイズを小さくすると上部が切れる

フィドル： http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}
cssinternet-explorercss3flexboxinternet-explorer-11
104
Dragonseer

つまり、最小高さスタイルのみが設定されている場合、または高さスタイルがまったくない場合、ブラウザには内部コンテナを垂直に配置する問題があることがわかりました。私がやったことは、高さのスタイルに値を追加して、問題を解決することでした。

例えば ​​：

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

これで高さスタイルができましたが、min-heightがそれを上書きします。つまり、幸せであり、私たちはまだ最小高さを使用できます。

これが誰かに役立つことを願っています。

198
Kaloyan Stamatov

フレックスボックス化されたdivを、フレックスボックス化されたコンテナでflex-direction: columnでラップしてみてください。

IE11でこれをテストしたところ、動作します。奇妙な修正ですが、Microsoftが内部のバグ修正を外部で行うまでは...やらなければなりません！

HTML：

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS：

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

IE11でテストする2つの例： http://codepen.io/philipwalton/pen/JdvdJEhttp://codepen.io/chriswrightdesign/pen/emQNGZ/

57
ericodes

誰かが私が持っていたのと同じ問題でここに来た場合に備えて、以前のコメントで具体的に対処されていません。

内側の要素にmargin: autoがあり、それが親の下部（または外側の要素）に張り付いています。私にとってそれを修正したのは、マージンをmargin: 0 auto;に変更することでした。

6
Gal Talmor

これが私の作業ソリューション（SCSS）です。

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
5
Sergey Fedirko

これは既知のバグであり、Microsoftの内部で修正されているようです。

https://connect.Microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-プレビュー

5
David Zulaica

私は両方のフィドルを更新しました。私はそれがあなたの仕事を終わらせることを願っています。

センタリング

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

中央とスクロール

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }
3
Umar Khan

私のために働いた良い解決策を見つけました、このリンクをチェックしてください https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 まず、親divを追加し、次にmin-height：100％をmin-height：100vhに変更します。それは魅力のように機能します。

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}
1
Avirtum

私はFlexboxの経験はあまりありませんが、htmlおよびbodyタグの高さが強制されると、サイズ変更時にテキストが一番上に表示されなくなるようです。 IEでテストすることはできませんが、Chromeでも同じ効果が見つかりました。

あなたのフィドルをフォークし、heightとwidthの宣言を削除しました。

body
{
    margin: 0;
}

flex設定を他のflex要素に適用する必要があるようにも見えました。ただし、display: flexを.innerに適用すると問題が発生するため、.innerをdisplay: blockに明示的に設定し、位置決めのために.outerをflexに設定します。

.outerの最小の高さをビューポートに合わせて設定し、display: flexを設定し、水平および垂直の配置を設定します。

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.innerをdisplay: blockに明示的に設定しました。 Chromeでは、.outerからflexを継承しているように見えました。幅も設定します：

.inner
{
    display:block;
    width: 80%;
}

これにより、Chromeの問題が修正されました。IE11でも同じようになる可能性があります。ここに私のバージョンのフィドルがあります： http://jsfiddle.net/ToddT/5CxAy/21/

1
Todd

親の幅と高さを定義できる場合は、コンテナを作成せずに画像を集中化する簡単な方法があります。

何らかの理由で、min-widthを定義すると、IEはmax-widthも認識します。

このソリューションは、IE10 +、Firefox、Chromeで機能します。

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

0
Humberto Mendes