Flexbox non centrée verticalement dans IE
J'ai une simple page Web avec du contenu Lipsum centré sur la page. La page fonctionne bien dans Chrome et Firefox. Si je réduis la taille de la fenêtre, le contenu remplit la fenêtre jusqu'à ce qu'il ne le puisse plus, puis ajoute une barre de défilement et remplit le contenu hors écran, vers le bas.
Cependant, la page n'est pas centrée dans IE11. Je peux faire en sorte que la page soit centrée dans IE en pliant le corps, mais si je le fais, le contenu commence à sortir de l'écran vers le haut et coupe le haut du contenu.
Vous trouverez ci-dessous les deux scénarios. Voir les Fiddles associés. Si le problème n'est pas évident tout de suite, réduisez la taille de la fenêtre de résultat afin qu'elle soit obligée de générer une barre de défilement.
Remarque: cette application ne cible que les dernières versions de Firefox, Chrome et IE (IE11), qui prennent toutes en charge le recommandation du candidat de Flexbox , de sorte que la compatibilité des fonctionnalités ne devrait pas poser de problème ( en théorie).
Edit: lors de l'utilisation de l'API Fullscreen pour afficher en plein écran la div externe, tous les navigateurs sont correctement centrés à l'aide du CSS d'origine. Cependant, lorsque vous quittez le mode plein écran, IE redevient horizontalement centré et verticalement aligné en haut.
Edit: IE11 utilise une implémentation de Flexbox non spécifique au fournisseur. _ { Mises à jour de la présentation de la boîte flexible ("Flexbox"))
Centre et redimensionne correctement dans Chrome/FF, ne centre pas mais se redimensionne correctement dans IE11
Fiddle: 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%;
}
Centre correctement partout, coupe en haut lorsque dimensionné
Fiddle: 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%;
}
J'ai constaté que les navigateurs rencontrent des problèmes pour aligner verticalement les conteneurs intérieurs, lorsque seul le style hauteur-hauteur est défini ou lorsque le style Hauteur est absent. Ce que j'ai fait a été d'ajouter un style de hauteur avec une certaine valeur et cela résout le problème pour moi.
par exemple :
.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;
}
Nous avons donc maintenant un style height, mais min-height l’écrasera. De cette façon, c’est-à-dire qu’il est heureux et que nous pouvons toujours utiliser la hauteur minimale.
J'espère que c'est utile pour quelqu'un.
Essayez d’emballer la division que vous avez utilisée avec flex-direction: column dans une boîte qui est également en boîte.
Je viens de tester cela dans IE11 et cela fonctionne. Un correctif étrange, mais tant que Microsoft n'aura pas corrigé son bogue interne vers l'externe ... il faudra le faire!
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 exemples à tester dans IE11: http://codepen.io/philipwalton/pen/JdvdJEhttp://codepen.io/chriswrightdesign/pen/emQNGZ/
Il s'agit d'un bogue connu qui semble avoir été résolu en interne chez Microsoft.
Juste au cas où quelqu'un arriverait avec le même problème que moi, ce qui n'est pas spécifiquement abordé dans les commentaires précédents.
J'ai eu margin: auto sur l'élément interne qui l'a fait coller au bas de son parent (ou de l'élément externe) . Ce qui l'a corrigé pour moi a été de changer la marge en margin: 0 auto;.
j'ai mis à jour les deux violons. J'espère que cela fera votre travail.
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;
}
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;
}
Voici ma solution de travail (SCSS):
.item{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 120px;
&:after{
content:'';
min-height:inherit;
font-size:0;
}
}
Trouvez une bonne solution qui fonctionne pour moi, vérifiez ce lien https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Tout d'abord, nous ajoutons une division parent, hauteur: 100% à min-hauteur: 100vh. Il fonctionne comme un charme.
// 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;
}
Je n'ai pas beaucoup d'expérience avec Flexbox mais il me semble que la hauteur imposée sur les balises html et body provoque la disparition du texte en haut lors du redimensionnement - je n'ai pas pu tester dans IE mais trouvé le même effet dans Chrome.
J'ai bifurqué votre violon et enlevé les déclarations height et width.
body
{
margin: 0;
}
Il semblait également que les paramètres flex devaient être appliqués à d'autres éléments flex. Cependant, l'application de display: flex au .inner a posé des problèmes. J'ai donc explicitement défini le .inner sur display: block et le .outer sur flex pour le positionnement.
J'ai défini la hauteur minimale de .outer pour remplir la fenêtre, le display: flex, ainsi que les alignements horizontal et vertical:
.outer
{
display:flex;
min-height: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
}
Je règle .inner à display: block explicitement. Dans Chrome, il semblait que la variable flex était héritée de .outer. J'ai aussi réglé la largeur:
.inner
{
display:block;
width: 80%;
}
Cela corrigeait le problème dans Chrome. J'espère que cela pourrait faire de même dans IE11. Voici ma version du violon: http://jsfiddle.net/ToddT/5CxAy/21/
Si vous pouvez définir la largeur et la hauteur du parent, il existe un moyen plus simple de centraliser l'image sans avoir à créer un conteneur.
Pour une raison quelconque, si vous définissez la largeur minimale, IE reconnaîtra également la largeur maximale.
Cette solution fonctionne pour IE10 +, Firefox et 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%;
}