CSS/Tutorials/Flexbox

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

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

Weblinks


Artikel

Demos

Generatoren

bekannte Browserbugs