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

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ś.


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/


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

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


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


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

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/


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

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/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.