CSS/Tutorials/Flexbox

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
6x45min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

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

Weblinks[Bearbeiten]


Artikel

Demos

Generatoren

bekannte Browserbugs