De ce nu funcționează justify-content: center în IE? (Programare, Css, Flexbox, Internet Explorer 11)

KaeL a intrebat.

Am acest div simplu cu un buton în interiorul lui. justify-content: center; funcționează bine folosind Firefox și Chrome, dar nu funcționează pe IE 11:

Scopul meu este ca, atunci când folosesc transform cu rotate(90deg) sau rotate(270deg), butonul să se încadreze în div:

height și width din div și button sunt întotdeauna aceleași, dar pot fi personalizate.

Pe cât posibil, prefer să nu împachetez elementele.

2 răspunsuri
misterManSam

IE11 are nevoie ca părintele să aibă flex-direction: column.

Acest exemplu are butonul dvs. rotit:

Comentarii

    15

  • Am crezut că flex-direction a atribuit axa principală pentru părinte. Deci, dacă este setat la row, justify-content:center ar trebui să centreze conținutul de-a lungul axei orizontale. Dacă îl setați în mod explicit pe coloana, ar trebui să centreze conținutul de-a lungul axei verticale. IE11 nu pare să respecte justify-content:center pe un rând. –  > Por ChrisPEditor.
  • În cazul meu, folosesc flex-direction: column-reverse; Totul depinde de cerințele dumneavoastră 🙂 –  > Por Marwan Salim.
  • mi-a salvat ziua. Aveam aceeași problemă. –  > Por Tarun.
Rafalfaro

În cazul meu a trebuit să fac înălțimea containerului flex de 100%. justify-content a funcționat fără probleme după aceea.

A trebuit, de asemenea, să fac max-width-ul copiilor (de prim nivel) 100% pentru a remedia unele depășiri de conținut pe orizontală.