Dies ist nur eine Spielwiese.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.
CSS/Tutorials/Flexbox
Aus SELFHTML-Test-Wiki
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.
- Warum Flexbox?
- Vorteile von Flexbox
- Flex-Container
- Container und Flex-Items
- flex-flow
- direction
- flex-wrap
- order
- Flex-Items
- flex
- flex-basis
- flex-grow
- flex-shrink
- unterschiedliche Spaltenbreiten
- flex
- Ausrichtung
- justify-content
- align-content
- align-items
- align-self
- gap
- Fixer Footer
- Responsives Mehrspaltenlayout
- Mobile first
- aside-Boxen am Rand
Weblinks
Artikel
- Webkrauts: Flexbox - Ablösung für float-Layouts
- 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
- scotch.io: Flexbox playground (sehr anschaulicher Generator und Live-Demo)
- echoplex.net: Flexy Boxes
- Bennett Feely: Flexplorer
- Flexbox please
bekannte Browserbugs
- github.com: philipwalton/flexbugs