CSS flex

[Linuchs]

Moin,

der AHA Effekt zum flex-Modell lässt bei mir auf sich warten.

MrMurphy1 19.08.2016 14:16 hat mir ein Linuchs header Testlayout verlinkt mit 315 Zeilen, leider kein Hinweis auf das Wesentliche.

Dann habe ich hier "nur" ein paar Zeilen gefunden:

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

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

Was muss ich ändern, um den roten und grünen Container zu tauschen?

Ich habe gehofft, dass man Container in der X-Reihenfolge oder in der Y-Reihenfolge ändern kann. Habe ich das mißverstanden?

Linuchs

[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

[Linuchs]

Hey Jo,

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

Okay, das war der AHA-Effekt. Doch article hat eine feste Größe und schneidet auf dieser Seite den Inhalt ab, warum?

Linuchs

[j4nk3y]

Hey,

Doch article hat eine feste Größe und schneidet auf dieser Seite den Inhalt ab, warum?

Ziemlich schwierig sich da durch zu kämpfen, da du auch nur einen Teil des Styles in eine CSS auslagerst. Und ich finde auch, dass Tabulatoren es deutlich einfacher machen Markup zu lesen. (Nur am Rande und wie ich finde, darf das gern persönlicher Stil bleiben, ohne eine Diskussion lostreten zu wollen)

Bei mir schneidet sich aber nichts vom Inhalt ab, jedenfalls nicht im article Flexbox.

Gruß
Jo

[MrMurphy1]

Hallo

Eventuell meint Linuchs den Quellcode "header {...}" bei sehr schmalem Fenster.

Das hat nichts mit Flexbox zu tun sondern ist das normale Verhalten des Inhalts des pre-Elements.

Gruss

MrMurphy