webentwicklung-frage-antwort-db.com.de

Warum funktioniert justify-content: center nicht im IE?

Ich habe dieses einfache div mit einem Button drin . justify-content: center; funktioniert gut mit Firefox und Chrome, aber nicht unter IE 11: 

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
}
<div id="div">
  <button id="button">HELLO</button>
</div>

Mein Ziel ist es, wenn ich transform mit rotate(90deg) oder rotate(270deg) verwende, der Button in das div passt: 

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}
<div id="div">
  <button id="button">HELLO</button>
</div>

Die height und width der div und button sind immer gleich, jedoch anpassbar.

So weit wie möglich ziehe ich es vor, Elemente nicht einzuwickeln.

csscss3flexboxinternet-explorer-11
17
KaeL

IE11 benötigt das übergeordnete Element flex-direction: column.

In diesem Beispiel wurde der Button gedreht:

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}
<div id="div">
  <button id="button">HELLO</button>
</div>

43
misterManSam

In meinem Fall musste ich die Höhe des Flex-Containers auf 100% bringen. justify-content funktionierte danach problemlos.

Ich musste auch die maximale Breite der (ersten) Kinder für 100% festlegen, um einen horizontal überlaufenden Inhalt zu korrigieren.

0
Rafalfaro