34. 1. Floats? Die brauchen wir nicht.
!
2. Layouts, die zuvor eine
Herausforderung waren, sind
nun verständlicher.
!
3. Wir können wirklich flexible
Layouts erstellen und die
Berechnungen macht der
Browser.
44. Legt fest, ob die Elemente in einem Flexbox-
Container auf einer Linie liegen, oder bei bedarf auf
mehrere Zeilen verteilt werden können.
flex-wrap: nowrap
wrap
wrap-reverse
45. Syntax:
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Die flexiblen Elemente liegen
alle in derselben Reihe, auch
wenn dazu der Platz fehlt.
Die flexiblen Elemente können
sich wenn nötig innerhalb des
Containers in mehrere Zeilen
aufteilen (nach unten).
Die flexiblen Elemente können
sich wenn nötig innerhalb des
Containers in mehrere Zeilen
aufteilen (nach oben).
46. Die Kurzschreibweise flex-flow fasst die
Eigenschaften flex-direction und flex-wrap
zusammen.
syntax aus: „flex-direction“ „flex-wrap“
flex-flow
54. Legt fest, wo die Elemente in einem Flexbox-
Container positioniert sind, oder welchen Abstand sie
zueinander haben.
align-content: flex-start
flex-end
center
space-between
space-around
stretch
70. „Multiscreen is about developing a single application
for multiple interfaces – one for each screen type:
smartphone, tablet, desktop, and television.“
Ridley Marx
71. John Allsopp, A dao of webdesign: http://alistapart.com/article/dao
„It is the nature of the web to be flexible, and it should
be our role as designers and developers to embrace
this flexibility, and produce pages which, by being
flexible, are accessible to all. The journey begins by
letting go of control, and becoming flexible.“
72. Es geht nicht mehr darum, ein Design pixelgenau
umzusetzen, es geht um den Kern des Internets.
92. 7.0* 5.0-7.0 4.4 10.0* 21.0 35.0 29.0 10.0*
Supported teilweise Supported nicht Supported
Browsersupport Mobile
* benötigt Vendor-Präfix
iOS Mini Mobile Andriod Andriod
http://caniuse.com/flexbox
93. 7.0* 5.0-7.0 4.4 10.0*
16.0
35.0 29.0 10.0*
6.0-6.1* 4.2-4.3* 7.0*
12.15.0-5.1* 4.1*
12.04.2-4.3* 4.0*
11.5
Supported teilweise Supported nicht Supported
4.0-4.1* 3.0*
iOS Mini Mobile Andriod Andriod
26.0*33.0
http://caniuse.com/flexbox
21.0
* benötigt Vendor-Präfix
107. Mach es anders als andere (es erwarten). Selbst wenn
Deine Aktivität in eine falsche Richtung geht, erhältst
Du wertvolle Informationen daraus. Jeder Fehler ist
der Beginn einer neuen Idee.