CSS/Eigenschaften/Flexbox

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Flexbox)
Wechseln zu: Navigation, Suche

Flexbox ist eine sehr 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Einstieg in Flexbox
  1. Warum Flexbox?
    • Vorteile von Flexbox
  2. Flex-Container
    • Container und Flex-Items
    • Richtungsangaben
    • Umbruch in neue Reihen
    • order (abweichende Reihenfolge der Anordnung)
  3. Flex-Items
    • flex (Festlegung der Spaltenbreite)
      • 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



Referenz[Bearbeiten]

Weblinks[Bearbeiten]


Artikel

Demos

Generatoren

bekannte Browserbugs