Flexbox nie wyśrodkowuje się w pionie w IE

116

Mam prostą stronę internetową z zawartością Lipsum, która jest wyśrodkowana na stronie. Strona działa dobrze w Chrome i Firefox. Jeśli zmniejszę rozmiar okna, zawartość wypełnia okno, aż nie może, a następnie dodaje pasek przewijania i wypełnia zawartość poza ekranem, w dół.

Jednak strona nie jest wyśrodkowana w IE11. Mogę wyśrodkować stronę w IE, wyginając ciało, ale jeśli to zrobię, zawartość zacznie znikać z ekranu w górę i obcina górę zawartości.

Poniżej znajdują się dwa scenariusze. Zobacz powiązane Skrzypce. Jeśli problem nie jest od razu widoczny, zmniejsz rozmiar okna wyników, tak aby było zmuszone do wygenerowania paska przewijania.

Uwaga: ta aplikacja jest przeznaczona tylko dla najnowszych wersji przeglądarek Firefox, Chrome i IE (IE11), które obsługują rekomendację kandydata Flexbox , więc kompatybilność funkcji nie powinna stanowić problemu (teoretycznie).

Edycja : podczas używania pełnoekranowego interfejsu API do pełnoekranowego zewnętrznego elementu div, wszystkie przeglądarki prawidłowo wyśrodkowują, używając oryginalnego CSS. Jednak po wyjściu z trybu pełnoekranowego IE powraca do wyśrodkowania w poziomie i wyrównania do góry w pionie.

Edycja : IE11 używa implementacji Flexbox innej niż producent. Aktualizacje układu elastycznego pudełka („Flexbox”)


Centruje i zmienia rozmiar poprawnie w Chrome / FF, nie wyśrodkowuje, ale poprawnie zmienia rozmiar w IE11

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

Wyśrodkowuje się wszędzie, odcina od góry, gdy jest mniejszy

Skrzypce: 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%;
}
Dragonseer
źródło
Nie mam w tej chwili dostępu do IE11, czy wypróbowałeś to rozwiązanie: stackoverflow.com/questions/16122341/… ?
cimmanon
margin: auto nie wydaje się mieć znaczenia.
Dragonseer,
Proszę zgłosić błąd Microsoft przynajmniej będzie miał jeden błąd mniej w oficjalnym wydaniu, jak zawsze IE będzie miał coś (wiele unikalnych błędów) do załatwienia ..
MarmiK
musisz używać -ms-flexboxdla IE ..
avrahamcool
IE11 wykorzystuje aktualny standard wyświetlania Flexbox: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Mimo wszystko spróbowałem i nie zrobiło to różnicy; treść jest nadal wyrównana do góry. Zwróć też uwagę na moją zmianę w pierwotnym pytaniu, która stwierdza, że ​​zewnętrzny element div centruje prawidłowo, gdy jest na pełnym ekranie, ale jest wyrównany do góry, gdy jest poza pełnym ekranem.
Dragonseer

Odpowiedzi:

225

Zauważyłem, że np. Przeglądarka ma problem z wyrównywaniem kontenerów wewnętrznych w pionie, gdy jest ustawiony tylko styl minimalnej wysokości lub gdy w ogóle brakuje stylu wysokości. To, co zrobiłem, to dodanie stylu wysokości z pewną wartością i to rozwiązało problem.

na przykład :

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

Mamy teraz styl wysokości, ale min-wysokość nadpisze go. W ten sposób tzn. Jest szczęśliwy i nadal możemy używać min-height.

Mam nadzieję, że to jest pomocne dla kogoś.

Kaloyan Stamatov
źródło
9
Nie zapomnij -ms-flex-align:center;o IE10. Wsparcie dla align-itemszostało dodane tylko w IE11 .
Boaz
Ach! tak wiele miesięcy później uratowało mnie to - ustawienie wysokości zamiast minimalnej wysokości działało.
Pete
@KaloyanStamatov Wypróbuj autoprefixer i pomóż sobie z tymi irytującymi problemami z różnymi przeglądarkami.
hitautodestruct
29
To rozwiązanie nie działa, gdy zawartość jest większa niż minimalna wysokość. min-heightRzeczywiście ma zastąpić heightregułę, ale jeśli zawartość przekracza min-heightbędzie ona po prostu rozszerzyć poza granice. Odpowiedź przez @ericodes rozwiązuje ten problem i rozwiązanie działa na wszystkich przeglądarkach obsługujących Flex.
lachie_h
2
Dla każdego, kto przyjedzie tutaj w 2019 roku lub później, zdecydowanie najlepszym rozwiązaniem jest to autorstwa @ sergey-fedirko, które nie wymaga dodatkowych elementów HTML i twardych wysokości;) To: stackoverflow.com/a/54796082/134120
AsGoodAsItGets
71

Spróbuj owinąć dowolny element div, z którym masz flexbox, flex-direction: columndo kontenera, który również jest flexbox.

Właśnie przetestowałem to w IE11 i działa. Dziwna poprawka, ale dopóki Microsoft nie sprawi, że ich wewnętrzna poprawka będzie zewnętrzna ... to będzie musiało wystarczyć!

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

2 przykłady do przetestowania w IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

erikody
źródło
1
W rzeczywistej odpowiedzi należy zamieścić kod użyty do rozwiązania problemu, a nie link do zewnętrznego adresu URL. Wtedy Twoja odpowiedź będzie nadal pomocna, nawet po usunięciu linku.
Kelly Keller-Heikkila
11
To zdecydowanie najlepsze rozwiązanie tego błędu. Wszystkie inne odpowiedzi sugerują stałą wysokość kontenera, co nie działa, jeśli zawartość ma zmienną wysokość. To rozwiązanie pozwala na użycie min-heightzamiast twardej heightreguły, przy jednoczesnym wyśrodkowaniu w pionie we wszystkich przeglądarkach obsługujących korzystanie z display: flex.
lachie_h
1
Po prostu display:flexjest potrzebny na opakowaniu, a może na jednym z nich na dziecku: w width: 100% flex-basis:100% flex-grow:1zależności od treści / stylu.
fregante
to obejście nie działa, jeśli ustawiono właściwość FlexContainerWrapper align-items. Musisz owinąć oryginalny flexbox w flexbox bez tej właściwości.
Marcus Krahl
hej @MarcusKrahl! czy mówisz, że oryginalny flexbox (FlexContainer) jest opakowany w flexbox bez align-itemswłaściwości (FlexContainerWrapper)?
ericodes
10

Oto moje rozwiązanie robocze (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
Sergey Fedirko
źródło
6

Na wypadek, gdyby ktoś dotarł tutaj z tym samym problemem, co ja, który nie został szczegółowo omówiony w poprzednich komentarzach.

Miałem margin: autona elemencie wewnętrznym, który spowodował, że przykleił się do spodu swojego rodzica (lub elementu zewnętrznego). Naprawiło to dla mnie zmianę marginesu na margin: 0 auto;.

Gal Talmor
źródło
5

Jest to znany błąd, który prawdopodobnie został naprawiony wewnętrznie w firmie Microsoft.

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

David Zulaica
źródło
43
Najwyraźniej nie zostało to jednak naprawione zewnętrznie.
Blazemonger,
4
„Wydaje się, że ten problem został rozwiązany w przeglądarce Microsoft Edge. Obecnie nie pracujemy nad błędami funkcji w przeglądarce Internet Explorer poza problemami związanymi z bezpieczeństwem”. Zamknęli problem z wersjami IE przed Edge
David Zulaica
1
Wydaje się, że rozwiązaniem jest użycie wysokości zamiast min-wysokości, jeśli możesz.
frodo2975
3

zaktualizowałem oba skrzypce. mam nadzieję, że dzięki temu wykonasz swoją pracę.

krążyna

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

wyśrodkuj i przewiń

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;
    }
Umar Khan
źródło
Dzięki za wkład. Niestety, Twoje Fiddle nie działają w przeglądarce Chrome ani IE11. Przykład wyśrodkowania nie jest już wyśrodkowany w Chrome, a przykład ze środkiem i przewijaniem nie jest wyśrodkowany w IE11 i nadal odcina zawartość.
Dragonseer
1

Nie mam dużego doświadczenia, Flexboxale wydaje mi się, że wymuszona wysokość tagów htmli bodypowoduje, że tekst znika na górze po zmianie rozmiaru - nie mogłem przetestować w IE, ale znalazłem ten sam efekt w Chrome.

Rozwidliłem twoje skrzypce i usunąłem deklaracje heighti width.

body
{
    margin: 0;
}

Wydawało się również, że flex ustawienia należy zastosować do innych flexelementów. Jednak stosowanie display: flexsię do .innerspowodowanych kwestiami tak jawnie ustawić .innersię display: blocki ustawić .outersię flexdo pozycjonowania.

Ustawiam minimalną .outerwysokość wypełniania rzutni display: flex, oraz ustawiam wyrównanie w poziomie i pionie:

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

I ustawione .innerna display: blockwprost. W Chrome wyglądało na to, że odziedziczył flexpo .outer. Ustawiłem też szerokość:

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

To rozwiązało problem w Chrome, mam nadzieję, że może zrobić to samo w IE11. Oto moja wersja skrzypiec: http://jsfiddle.net/ToddT/5CxAy/21/

Todd
źródło
Dzięki za odpowiedź. Deklaracja wysokości i szerokości jest konieczna, aby wyśrodkować w pionie w IE. Bez tego treść nie jest już wyśrodkowana w IE11.
Dragonseer
Nawet z wysokością ustawioną na zewnętrznym div? Może dodać minimalną wysokość do ciała?
Todd,
1

Znalazłem dobre rozwiązanie, które działało u mnie, sprawdź ten link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Najpierw dodajemy nadrzędny div, po drugie zmieniamy min-height: 100% na min- wysokość: 100 vh. To działa jak urok.

// 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;
}  
Avirtum
źródło
0

Jeśli możesz zdefiniować szerokość i wysokość rodzica, istnieje prostszy sposób na scentralizowanie obrazu bez konieczności tworzenia dla niego kontenera.

Z jakiegoś powodu, jeśli zdefiniujesz min-width, IE rozpozna również max-width.

To rozwiązanie działa dla IE10 +, Firefox i 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/

Humberto Mendes
źródło