CSS flex

[j4nk3y]

Hey,

Aber alle Boxen haben dieselbe flex: 1 - wie soll man da die Reihenfolge bestimmen? Die Änderung auf flex: 2 bewirkt nichts (Firefox 48.0).

Mit flex: 1; bzw flex: 2; etc. gibst du nur die breite der Box an für 1 währen das (1 * 100% / anzahl der boxen), für 2 wäre das (2 * 100% / anzahl der Boxen), 100% von dem zur verfügung stehendem Platz wohl gemerkt.

Die Position legt man mit order: *; fest... sprich du sagst der box an welchem Platz in der Reihenfolge sie einnehmen soll.

Zur Frage : Dann würde der Rote container ein order: 3; und grün ein order: 1; bekommen. Da der Blaue container dann aber nicht weiß, wo er hingehört brauch dieser dann noch order: 2;

Zum beispiel: einmal ersetzen dann sieht man es ganz gut.

 <div style="background-color:coral; order: 3;" >RED</div>
  <div style="background-color:lightblue; order: 2; flex: 2;">BLUE</div>
  <div style="background-color:lightgreen; order: 1;" >Green div with more content.</div>

Gruß
Jo