Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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
  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com


Einstieg in Flexbox

Weblinks[Bearbeiten]


Artikel

Demos

Generatoren

bekannte Browserbugs