web-dev-qa-db-fra.com

Prise en charge de Cross Browser pour CSS Flexbox

J'utilise le code mentionné ci-dessous, il fonctionne sur mon Chrome mais pas sur mon IE9 et Safari.

J'ai recherché la solution sur Google, même si j'ai obtenu divers préfixes de fournisseurs, ces résultats me déroutent.

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>
cssflexboxcross-browser
14
jack prelusky

CSS Flexbox est optimisé pour la conception d'interface utilisateur. Il est développé principalement pour éviter le débordement de l'élément parent. Il réduira les enfants lorsque la taille de l'élément ancêtre est restreinte. Il remplira l'espace en augmentant la taille de l'élément enfant lorsque La taille de l'élément ancêtre augmente. Le comportement de rétrécissement et d'extension du conteneur Flex peut casser avec les propriétés largeur/hauteur min et max.

CSS FlexBox versions par version

W3 2009: affichage: boîte;

box-align                start | end | center | baseline | stretch  
box-direction            normal | reverse | inherit
box-flex                 <number>   0.0
box-flex-group           <integer>  1
box-lines                single | multiple
box-ordinal-group        <integer>  1   visual
box-orient               horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements    no  no  visual
box-pack                 start | end | center | justify

W3 2011: afficher flexbox | inline-flexbox

flex-align        auto | baseline   auto
flex-direction    lr | rl | tb | bt | inline | inline-reverse | block | block-reverse   flexboxes   no  lr | rl | tb | bt
flex-order        <integer> 1   
flex-pack         start | end | center | justify

W3 2012: affichage flexible | inline-flex

align-content    flex-start | flex-end | center | space-between | space-around | stretch    
align-items      flex-start | flex-end | center | baseline | stretch
align-self       auto | flex-start | flex-end | center | baseline | stretch                 
flex-direction   row | row-reverse | column | column-reverse
flex-flow        <'flex-direction'> || <'flex-wrap'>    
flex-grow        <number>   ‘0’ 
flex-shrink      <number>   ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order            <number>   0
16
chandru kutty

Pour couvrir toutes les implémentations Flexbox, votre CSS ressemblerait à ceci:

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

Notez cependant que la spécification de flex-direction: row n'est pas nécessaire à moins que vous ne remplaciez une déclaration de flex-direction précédente: la ligne est la direction par défaut. Notez également que IE10 est la première version de IE pour prendre en charge Flexbox.

22
cimmanon

Mon Flexbox css: j'ai testé sur plusieurs appareils de Android 2.3.3 et IOS et fonctionne bien:

.flex-container {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;

}

.item {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
2
Martin Alcubierre Arenillas

Je suggère de lire la spécification pour bien comprendre: http://dev.w3.org/csswg/css-flexbox/

Pour les visuels à l'esprit @ chris-coyier a récemment remanié son message avec l'aide de (@ hugo-giraudel): http://css-tricks.com/snippets/css/a-guide-to-flexbox/

exemple de code: Live (crédit à @ chris-coyier ne peut tout simplement pas trouver le message d'origine donc refait): http://cdpn.io/oDxnp

compilé mettre ressemblerait à ceci

affichage: flex; =>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

flex-direction: rangée; =>

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
1
imagineux

IE9-, malheureusement, ne prend pas en charge Flexbox du tout. IE10 prend en charge la version 2011.

Opera 12.1+ prend en charge la dernière version 2012 sans préfixe. Il sera également pris en charge par Chrome 30+ et IE11 +. Firefox 22 le prend déjà en charge également, mais seulement partiellement - il ne prend pas en charge la propriété flex-wrap et le raccourci flex-flow.

Les versions précédentes de Firefox, Chrome et Safari 3.1+ prennent en charge la version 2009. Chrome 21+ prend également en charge la version 2012 avec préfixe.

1
Ilya Streltsyn