Home >Internet >Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

Date post:15-Dec-2014
Category:
View:557 times
Download:5 times
Share this document with a friend
Description:
 
Transcript:
  • 1. CSS3-Flexbox-Modell Responsive Webdesign Neue Mglichkeiten und Freiheiten mit dem Peter Rozek, ecx.io germany GmbH
  • 2. Peter Rozek, ecx.io germany GmbH Speaker
  • 3. Frontend Entwicklung: Gestern, Heute, Morgen
  • 4. Gestern: float: left/right; clear: both position:relative position:absolute position: xed
  • 5. Heute: float: left/right; display: flex; clear: both position:relative position:absolute position: xed
  • 6. Morgen: display: flex;
  • 7. Flexbox untersttzt uns fr flexible und skalierbare Layouts.
  • 8. Beliebig positionieren und aneinander ausrichten
  • 9. Reihenfolge verndern ordre display Ohne das HTML-Dokument anzupassen
  • 10. Vertical Alignment
  • 11. Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten anordnen.
  • 12. Elemente lassen in der Hhe, als auch in der Breite nach unterschiedlichsten Verhltnissen anpassen.
  • 13. Das geht doch auch mit herkmmlichen CSS.
  • 14. Fr komplexere Lsungen wie z.B. Equal Height Columns oder Vertical Alignment muss man tief in die Trickkiste greifen.
  • 15. Beispiel mit CSS Equal Height Columns
  • 16.
    .........
  • 17. {css} .content { width: 60%; float: left; background: #fff; } .sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }
  • 18. mit CSS und pseudo Selektor Equal Height Columns
  • 19. .content { float: left; } .content, .content:before { width: 60%; } .content:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff; } .primary, .primary:before { width: 20%; } .primary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 60%; background-color: #5f6673; } .secondary, .secondary:before { width: 20%; } .secondary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 80%; background-color: #434750; } {css} .sidebar { float: left; } .wrapper { position: relative; overflow: hidden; } .footer { clear: both; float: none; }
  • 20. http://brm.io/jquery-match-height/ mit jQuery matchHeight.js* Equal Height Columns * matchHeight.js kann auch Responsive
  • 21. jQuery Plugin jQuery Libary
  • 22.
    .........
    data Attribute
  • 23. {css} .content { width: 60%; float: left; background: #fff; } .sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }
  • 24. mit Flexbox einfach smarter Equal Height Columns
  • 25.
    .........
  • 26. display: flex; Das ist alles! {css}
  • 27.
    .........
    {css} .wrapper { display: flex; } wrapper = flex container content und sidebar = flex items
  • 28. Vorteil gegenber float: Nachfolgende Elemente sind von display: flex nicht betroffen und umflieen die Flexbox nicht.
  • 29. clear: both position:relative position:absolute position: xed Das hier ist nicht mehr notwendig:
  • 30. 1. Floats? Die brauchen wir nicht. ! 2. Layouts, die zuvor eine Herausforderung waren, sind nun verstndlicher. ! 3. Wir knnen wirklich flexible Layouts erstellen und die Berechnungen macht der Browser.
  • 31. Terminologie
  • 32. Properties Elternelement (ex container) Properties Kindelemente display flex-direction flex-wrap flex-flow align-items justify-content align-content order flex-grow flex-shrink flex-basis flex (ex items) (ex items) (ex items)
  • 33. Aufbau Flex Container main axis main start main end cross axis cross start cross end ex items
  • 34. Properties Elternelement
  • 35. ! Flexbox aktivieren http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/
  • 36. display: Deniert das Element als Flex-Container. Elemente darin werden zu Flex-items. flex inline-flex
  • 37. flex-direction: Steuert die Reihenfolge der Element in einer Flexbox. row row-reverse column column-reverse
  • 38. flex-direction: row; 4 3 2 11 2 3 4 4 3 2 1 1 2 3 4 flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; Syntax:
  • 39. Mehrzeilige An

Click here to load reader

Embed Size (px)
Recommended