Timo Korinth MAXIMAGO. Flexbox CSS Layouting der Zukunft

Size: px

Start display at page:

Download "Timo Korinth MAXIMAGO. Flexbox CSS Layouting der Zukunft"

Domenic Richard
6 years ago
Views:

1 Timo Korinth MAXIMAGO Flexbox CSS Layouting der Zukunft

2 Special Day Modern Business Applications Thema Sprecher Datum, Uhrzeit Raum TypeScript für.net-entwickler Christian Wenz DI, 20. September 2016, bis Zagreb B Angular 2: Komponentenbasierte HTML5-Anwendungen Christian Weyer DI, 20. September 2016, bis Zagreb B Flexbox CSS Layouting der Zukunft Timo Korinth DI, 20. September 2016, bis Zagreb B Leichtgewichtige Architekturen mit ASP.NET Web API und SignalR Christian Weyer DI, 20. September 2016, bis Zagreb B Mobile Apps und Zugriff auf Unternehmensdaten ohne Cloud-Speicher und VPN Christian Liebel DI, 20. September 2016, bis Zagreb B

5 Warum?

6 CENTER

7 intriguing.com

8 Der heilige Gral (Applikations-Layout) - Volle Breite - Gleich hoch - Code Reihenfolge - So wenig Code wie möglich LEFT HEADER CONTENT RIGHT FOOTER

9 Demo

10 Applikations-Layouts Meist genutzt: Block & Float (z.b. auch von Bootstrap) Absolute Positionierung Feste Größen JavaScript / jquery CSS Hacks / Tricks (eigener Studiengang)

12 Flexbox The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

13 Flexbox The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

14 Flexbox Container Item 1 Item 2 Direction Cross axis

15 Flexbox display: flex; Container

16 Flexbox flex-direction: row row-reverse column column-reverse; row (default) row-reverse column-reverse column

17 Flexbox flex-grow: <number>; (default)

18 Flexbox flex-basis: <length> auto; auto (default) %

19 Flexbox flex-shrink: <number>; 1 (default) Kurzschreibweise: flex: <grow> <shrink> <basis>;

20 Flexbox Container flex-direction: column; HEADER flex: 0 0 auto; MAIN flex: %;

21 Flexbox Container NAV flex: 0 0 auto; CONTENT flex: %;

22 Flexbox Browser Support

23 Browser Prefixe display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; Ist eigentlich

24 Mixins / Autoprefixer.flexDisplay { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; }

25 Demo

26 Flexbox Alternative CSS Grid Layout

27 Grid Layout HEADER NAV CONTENT FOOTER

28 Grid Layout Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

29 Grid Layout An important thing to understand about Grid is that it's not ready to be used in production yet. It's currently a W3C Working Draft and isn't supported correctly in any browsers yet by default. Internet Explorer 10 and 11 support it, but it's an old implementation with an outdated syntax.

30 Grid Layout Browser Support

31 Best practices Less Sass Mixins für Browser Prefixe oder Autoprefixer Überall nutzen (auch tiefe Schachtelung möglich) Wichtigste Einstellung: flex: 0 0 auto; flex: %; 99%

32 Advanced

33 Advanced fix auto fix auto fix auto auto flex: 0 0 auto;

34 Advanced fix auto dynamisch auto fix auto dynamisch auto fix auto auto flex: 0 0 auto;

35 Advanced Freiraum Freiraum fix auto dynamisch auto fix auto dynamisch 100% dynamisch auto fix auto auto flex: 0 0 auto; 100% flex: %;

36 Responsive 0 1 auto % 0 1 auto

37 Responsive 0 5 auto % 0 2 auto

38 Performance Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex). Google Dev, Flexbox layout isn't slow Flexbox is 4x faster than using floats. Google Dev, Avoid large, complex layouts and layout thrashing

39 Zukunft

CSC Website Design, Spring CSS Flexible Box

CSC Website Design, Spring CSS Flexible Box CSC 122 - Website Design, Spring 2017 CSS Flexible Box CSS Flexible Box Layout Module The CSS flexbox can be used to ensure that elements behave predictably when the page layout must accommodate different