CSS/Tutorials/Flexbox

Flexbox ist eine moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.

Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

1. Warum Flexbox?
   • Vorteile von Flexbox
2. Flex-Container
   • Container und Flex-Items
   • flex-flow
     • direction
     • flex-wrap
   • order
3. Flex-Items
   • flex
     • flex-basis
     • flex-grow
     • flex-shrink
   • unterschiedliche Spaltenbreiten
4. Ausrichtung
   • justify-content
   • align-content
   • align-items
   • align-self
   • gap
5. Fixer Footer
6. Responsives Mehrspaltenlayout
   • Mobile first
   • aside-Boxen am Rand
     
     
     
     
     

• Einstieg in Flexbox
• Warum Flexbox?

Weblinks

• W3C: CSS Flexible Box Layout Module Level 1

Artikel

• Kulturbanause: CSS Flexbox – Einführung in das Flexible Box Layout Module
• MSDN: „Flexbox“-Layout
• MDN: flexible Boxes (en)
• sitepoint.com: Flexible Box Layout (en)
• Philip Walton: bekannte Fehler und deren Behebung

Demos

• css-tricks.com: Flexbox navigation demo
• freecodecamp: How Flexbox works – explained with big, colorful, animated gifs – sehr anschauliche animated gifs
• Philip Walton: Solved by Flexbox Showcase von 6 typischen Layout-Beispielen, die mit Flexbox realisiert wurden
• flexboxfroggy – A game for learning CSS flexbox
• Flexbox Patterns

Generatoren

• echoplex.net: Flexy Boxes
• Bennett Feely: Flexplorer
• Flexbox please