解決方法IE 10/11 flex子溢出對齊

如果flex容器具有justify-content：center，並且存在比容器寬的單個flex子項，則內容保持居中（內容在兩個方向上均等溢出）除IE10和IE11以外的所有瀏覽器。解決方法IE 10/11 flex子溢出對齊

在大多數的瀏覽器，你會得到：

在IE 10/11你得到這樣的：

我需要一種方法來實現的IE居中佈局瀏覽器完全沒有放棄flexbox方法。如果有必要，我可以使用CSS hack IE解決方法。

下面是一個例子的小提琴：

.wrap { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 

 
.layer-inner { 
 
    font-size: 20px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    line-height: 1em; 
 
}

<div class="wrap"> 
 
    <div class="layer"> 
 
    <span class="layer-inner"> 
 
     This overlowing text should be centered 
 
    </span> 
 
    </div> 
 
</div>

來源

2017-02-17 Matt Dietsche

您是否嘗試過'的text-align：center'？ – pol

@pol是啊，沒有幫助。 –

我想通了。在IE 10/11中，「justify-content」和「align-items」的行爲有所不同。如果孩子比沿着證明內容軸的容器大，那麼IE 10/11將只使用「justify-content：flex-start」行爲。如果兒童沿着「align-items」軸比容器大，內容將根據「align-items」值正確對齊，即使是兒童溢出容器。

我的解決辦法是隻爲「柔性方向：列」添加到下面的代碼片段：

.wrap { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 

 
.layer-inner { 
 
    font-size: 20px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    line-height: 1em; 
 
}

<div class="wrap"> 
 
    <div class="layer"> 
 
    <span class="layer-inner"> 
 
     This overlowing text should be centered 
 
    </span> 
 
    </div> 
 
</div>

來源

2017-02-17 16:27:51

今天我有這個確切的問題，這是一個巨大的幫助！我很感激你花時間在這裏發佈。 – JonD

解決方法IE 10/11 flex子溢出對齊

回答

相關問題