Cross-Browser-Unterstützung für CSS Flexbox

Habe ich mit dem code unten erwähnt, es funktioniert auf meinem Chrome, aber nicht auf meine IE9 und Safari.

Googelte ich nach der Lösung, obwohl ich verschiedene vendor-Präfixe, diese Ergebnisse verwirren mich.

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>

Denken Sie daran Bearbeiten Sie die Frage und den code hinzufügen.
Diese Frage könnte sein: stackoverflow.com/questions/15662578/...

InformationsquelleAutor jack prelusky | 2013-07-03

CSS-Flexbox-Modell ist optimiert für das UI Design.
Es entwickelt in Erster Linie zu vermeiden, überfüllt übergeordneten element. Wird es verkleinert, wenn Kinder Vorfahr-element Größe verengt. Es füllt den Raum durch den ausbau Kind-element seine Größe, wenn vorgängerelement Größe erweitert.
Flex-container verkleinern und erweitern Verhalten brechen kann mit min-und max-width /height-Eigenschaft.

CSS-FlexBox-Versionen von version

W3 2009 : display: box;

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 : display-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 : display flex und 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

InformationsquelleAutor chandru kutty

Decken alle Flexbox-Implementierungen, Ihre CSS-Code würde dann wie folgt Aussehen:

.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;
}

Beachten Sie jedoch, dass die Angabe flex-direction: row ist nicht notwendig, es sei denn, Sie überschreiben einer vorherigen flex-direction Erklärung: Zeile ist die Standard-Richtung. Beachten Sie auch, dass IE10 die erste version von IE unterstützen Flexbox.

InformationsquelleAutor cimmanon

Meiner Flexbox css: ich habe getestet auf mehreren Geräten ab Android 2.3.3 und IOS und funktioniert ok:

.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+ */
}

InformationsquelleAutor Martin Alcubierre Arenillas

1

IE9-leider nicht unterstützt Flexbox überhaupt. IE10 unterstützt die version 2011.

Opera 12.1+ unterstützt die neueste version 2012 unprefixed. Es wird auch unterstützt von Chrome 30+ und IE11+. Firefox 22 unterstützt bereits es auch, aber nur teilweise — es spielt keine Unterstützung von flex-wrap-Eigenschaft und der flex-flow-Kürzel.

Vorherigen Versionen von Firefox, Chrome und Safari 3.1+ support version 2009. Chrome 21+ unterstützt auch die 2012 version mit Präfix.

InformationsquelleAutor Ilya Streltsyn
1

Ich würde vorschlagen, das Lesen der spec zu verstehen: http://dev.w3.org/csswg/css-flexbox/

Für die visuell denkende @chris coyier hat vor kurzem überarbeitet seine post-w/Hilfe (@hugo giraudel):http://css-tricks.com/snippets/css/a-guide-to-flexbox/

code-Beispiel:Live(credit @chris coyier einfach nicht finden können, original post, also neu verfilmt): http://cdpn.io/oDxnp

zusammengestellt aus setzen würde wie folgt Aussehen

display: flex; =>
```
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
```
flex-direction: row; =>
```
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
```
InformationsquelleAutor imagineux

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

zusammengestellt aus setzen würde wie folgt Aussehen