Flexbox, IE'de Dikey Olarak Ortalamıyor

Sayfada ortalanmış bazı Lipsum içeriğine sahip basit bir web sayfam var. Sayfa, Chrome ve Firefox'ta iyi çalışıyor. Pencerenin boyutunu küçültürsem, içerik pencereyi kapayana kadar doldurur ve ardından bir kaydırma çubuğu ekleyip içeriği ekranın dışına, aşağıya doğru doldurur.

Ancak, sayfa IE11'de ortalanmıyor. Gövdeyi esneterek sayfanın IE'de ortalanmasını sağlayabilirim, ancak bunu yaparsam, içerik ekrandan yukarıya doğru çıkmaya başlar ve içeriğin üst kısmını keser.

Aşağıda iki senaryo bulunmaktadır. İlgili Fiddles'a bakın. Sorun hemen ortaya çıkmazsa, sonuç penceresinin boyutunu küçültün, böylece bir kaydırma çubuğu oluşturmaya zorlanır.

Not: Bu uygulama yalnızca Firefox, Chrome ve IE'nin (IE11) en son sürümlerini hedefler ve bunların tümü Flexbox'ın Aday Önerisini destekler , bu nedenle özellik uyumluluğu bir sorun olmamalıdır (teoride).

Düzenleme : Dış div'i tam ekran için Tam Ekran API'sini kullanırken, tüm tarayıcılar orijinal CSS'yi kullanarak doğru şekilde ortalanır. Ancak, tam ekran modundan çıktıktan sonra IE, yatay olarak ortalanmış ve dikey olarak üste hizalanmış duruma geri döner.

Düzenleme : IE11, Flexbox'ın satıcıya özel olmayan uygulamasını kullanır. Esnek kutu ("Flexbox") düzeni güncellemeleri

Chrome / FF'de Doğru Şekilde Merkezler ve Yeniden Boyutlandırır, IE11'de Ortalamıyor Ancak Doğru Şekilde Yeniden Boyutlandırılıyor

Keman: 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%;
}

Her Yerde Doğru Şekilde Merkezlenir, Küçük Boyutta Üstü Keser

Keman: 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%;
}

Yani tarayıcının, yalnızca minimum yükseklik stili ayarlandığında veya yükseklik stili eksik olduğunda, iç kapları dikey olarak hizalamakta sorun yaşadığını buldum. Yaptığım şey, bir değerle yükseklik stili eklemekti ve bu benim için sorunu çözmekti.

Örneğin :

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

Şimdi yükseklik stilimiz var, ancak minimum yükseklik bunun üzerine yazacak. Bu şekilde ie mutlu olur ve yine de min-yüksekliği kullanabiliriz.

Umarım bu birisi için yararlıdır.

Flexbox'ladığınız div ne olursa olsun flex-direction: column, aynı zamanda flexbox'lı bir kapta sarmayı deneyin.

Bunu IE11'de test ettim ve işe yarıyor. Garip bir düzeltme, ancak Microsoft dahili hata düzeltmesini harici yapana kadar ... bunu yapmak zorunda kalacak!

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'de test edebileceğiniz 2 örnek: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

İşte benim çalışma çözümüm (SCSS):

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

Sadece birisinin buraya benimle aynı sorunla gelmesi durumunda, ki bu önceki yorumlarda özellikle ele alınmamış.

Ben margin: auto's üst sayfanın alt (veya dış eleman) için sopa buna neden iç elemana. Benim için düzelten şey, marjı olarak değiştirmekti margin: 0 auto;.

Bu, Microsoft'ta dahili olarak düzeltilmiş gibi görünen bilinen bir hatadır.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042 adresinden orijinal cevap

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

Her iki keman da güncelledim. Umarım işinizi halleder.

merkezleme

    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;
}

ortala ve kaydır

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;
    }

Çok fazla deneyimim yok Flexboxama bana öyle geliyor ki htmlve bodyetiketlerindeki zorunlu yükseklik, yeniden boyutlandırıldığında metnin üstte kaybolmasına neden oluyor - IE'de test edemedim, ancak aynı etkiyi Chrome'da buldum.

Kemancınızı çatalladım ve heightve widthbeyanları kaldırdım .

body
{
    margin: 0;
}

Ayrıca flexayarların diğer flexöğelere de uygulanması gerekiyordu . Ancak, uygulamadan display: flexiçin .innerneden konularda açıkça belirlenen bu yüzden .inneretmek display: blockve set .outeriçin flexkonumlandırma için.

.outerGörüntü alanını doldurmak için minimum yüksekliği display: flexve yatay ve dikey hizalamayı ayarladım:

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

Ben ayarlamak .inneriçin display: blockaçıkça. Chrome'da, miras flexalınmış gibi görünüyordu .outer. Ayrıca genişliği de ayarladım:

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

Bu, Chrome'daki sorunu çözdü, umarım aynısını IE11'de de yapabilir. İşte keman versiyonum: http://jsfiddle.net/ToddT/5CxAy/21/

Benim için işe yarayan iyi bir çözüm buldum, bu bağlantıyı kontrol edin https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 İlk olarak, bir üst div ekliyoruz, ikinci olarak min-yüksekliği değiştiriyoruz:% 100 min- yüksekliği: 100vh. Mucizevi şekilde çalışır.

// 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;
}  

Ebeveynin genişliğini ve yüksekliğini tanımlayabilirseniz, bunun için bir kap oluşturmak zorunda kalmadan görüntüyü merkezileştirmenin daha basit bir yolu vardır.

Bazı nedenlerden dolayı, min-genişliği tanımlarsanız, IE de maks-genişliği tanıyacaktır.

Bu çözüm IE10 +, Firefox ve Chrome için çalışıyor.

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