web-dev-qa-db-fra.com

Pourquoi justification-contenu: centre ne fonctionne pas dans IE?

J'ai cette simple div avec un bouton à l'intérieur . justify-content: center; fonctionne correctement avec Firefox et Chrome, mais pas avec 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>

Mon objectif est que, lorsque j'utilise transform avec rotate(90deg) ou rotate(270deg), le bouton s'intègre dans le div : 

#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>

Les height et width de div et button sont toujours les mêmes, mais sont personnalisables.

Autant que possible, je préfère ne pas envelopper les éléments.

csscss3flexboxinternet-explorer-11
17
KaeL

IE11 a besoin que le parent ait flex-direction: column.

Cet exemple a votre bouton tourné:

#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

Dans mon cas, je devais faire la hauteur du conteneur Flex à 100%. justifier-contenu a fonctionné sans problème après cela.

Je devais aussi faire 100% de la largeur maximale des enfants (premier niveau) pour réparer certains contenus débordant horizontalement.

0
Rafalfaro