28172 sujets

CSS et mise en forme, CSS3

Ms-flex-align sur IE10

Bonjour !

Voila je suis entrin de tester un peu toutes les possibilités de flexbox, pour que ce soit plus rapide j'ai testé les flexbox intégré à la dernière version de bootstrap :

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment
( C'est non fonctionnel sur leur site sous IE10, ils ont du zapper l'autoprefixer... )

Je me rends compte par exemple que la propriété ms-flex-align: end sur IE10 est bien prise en compte mais non fonctionnelle...

Vous auriez une idée ? A savoir que j'utilse directement Autoprefixer pour la compilation CSS.

Yann
Modifié par Sangohan62 (21 Sep 2016 - 14:47)
Administrateur
Sangohan62 a écrit :
Je me rends compte par exemple que la propriété ms-flex-align: end sur IE10 est bien prise en compte mais non fonctionnelle...

Hello,

Tu veux dire que cela ne fonctionne pas sur l'exemple de Bootstrap, sur un exemple à toi, ou bien "en général" ?

"a priori", il n'y a pas de bug connu avec ms-flex-align, mais peut-être que cela provient d'une autre partie de ton code ?
Alors effectivement ce n'est pas fonctionnel sur l'exemple de boostrap, pour cela que j'ai fais les test en local. Les blocs se positionnent correctement après compilation avec grunt. Mais il reste néanmoins un problème de positionnement vertical j'ai l'impression. J'ai vraiment repris le code source de l'exemple pour mes tests :

Voir le résultat : http://hpics.li/4f61de5

<div class="bd-example-row bd-example-row-flex-cols">
        <div data-example-id="" class="bd-example">
            <div class="container">
                <div class="row">
                    <div class="col-xs flex-xs-top">
                        One of three columns
                    </div>
                    <div class="col-xs flex-xs-middle">
                        One of three columns
                    </div>
                    <div class="col-xs flex-xs-bottom">
                        One of three columns
                    </div>
                </div>
            </div>
        </div>
    </div>


En sortie CSS :

.flex-items-xs-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
}

.flex-items-xs-middle {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.flex-items-xs-bottom {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}


Donc je vois pas trop d'ou viens le soucy ^^
Modifié par Sangohan62 (23 Sep 2016 - 11:44)
Bonjour.

C'est dommage qu'il n'y ait pas l'ensemble du CSS dans votre exemple...

Pas sûr que ce soit le cas pour vous, mais j'ai déjà eu des problèmes d'alignement avec Internet Explorer (11). La hauteur du container flex devait être explicitement renseignée pour que l'alignement fonctionne. Les max-height étaient insuffisants.

Il y a des contournements mais... il faudrait déjà que le problème soit celui-là.

Smiley smile
J'ai mis mon exemple ici : https://codepen.io/Sangohan62/pen/dpvPVB

Avec principalement dans le CSS la partie Grid Flexbox.

J'ai testé avec une hauteur forcé sur le row, cela corrige le problème... mais ca enlève tout l'intérêt des flexbox non ? Car la hauteur de mon bloc doit être extensible, avec une hauteur fixe, le contenu va déborder du conteneur ...
Si c'est bien ça le problème, la réponse est de mettre l'ensemble dans un autre container flex avec pour flex-direction : row et align-items : stretch (mais ce sont les valeurs par défaut).
Ce container va donner à son enfant unique la totalité de la hauteur disponible comme dans cet exemple :
http://codepen.io/chriswrightdesign/pen/emQNGZ

Smiley smile
Sujet clos
Aller à