🎨

CSS: Flexbox & Grid

58 cards · 🇺🇸 English → 🇩🇪 Deutsch

Layout mit CSS Flexbox und Grid.

Study all 58 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

Flexbox

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1Flexbox
    Ein CSS-Layout-Modul für eindimensionale Layouts (Zeile oder Spalte). Es ermöglicht flexible Größenanpassung und Ausrichtung von Elementen entlang einer Hauptachse.
  2. 2Create a flex container
    display: flex oder display: inline-flex auf ein Element anwenden. Seine direkten Kindelemente werden automatisch zu Flex-Items.
  3. 3Main axis in Flexbox
    Die Hauptachse, entlang der Flex-Items angeordnet werden. Die Richtung wird durch flex-direction festgelegt (row = horizontal, column = vertikal).
  4. 4Cross axis in Flexbox
    Die Achse senkrecht zur Hauptachse. Ist die Hauptachse horizontal (row), ist die Querachse vertikal, und umgekehrt.
  5. 5Values for flex-direction
    row (Standard, von links nach rechts), row-reverse, column (von oben nach unten), column-reverse. Legt die Richtung der Hauptachse fest.
  6. 6Justify-content
    Richtet Flex-Items entlang der Hauptachse aus. Werte: flex-start, flex-end, center, space-between, space-around, space-evenly.
  7. 7Align-items
    Richtet Flex-Items entlang der Querachse aus. Werte: stretch (Standard), flex-start, flex-end, center, baseline.
  8. 8Align-self
    Überschreibt align-items für einzelne Flex-Items. Erlaubt einem Element eine abweichende Querachsen-Ausrichtung gegenüber seinen Geschwistern.
  9. 9Flex-wrap
    Steuert, ob Flex-Items auf mehrere Zeilen umbrechen. Werte: nowrap (Standard, eine Zeile), wrap, wrap-reverse.
  10. 10Align-content
    Richtet mehrere Zeilen von Flex-Items entlang der Querachse aus, wenn zusätzlicher Platz vorhanden ist. Funktioniert nur mit flex-wrap: wrap.
  11. 11Flex property shorthand
    flex: [flex-grow] [flex-shrink] [flex-basis]. Beispiel: flex: 1 0 auto bedeutet wachsen, nicht schrumpfen, automatische Basisgröße.
  12. 12Flex-grow
    Definiert die Fähigkeit eines Flex-Items, bei Bedarf zu wachsen. Standard 0. Der Wert ist ein Verhältnis (flex-grow: 2 wächst doppelt so stark wie 1).
  13. 13Flex-shrink
    Definiert die Fähigkeit eines Flex-Items, bei Bedarf zu schrumpfen. Standard 1. Wert 0 verhindert das Schrumpfen.
  14. 14Flex-basis
    Legt die Standardgröße eines Elements fest, bevor verbleibender Platz verteilt wird. Standard auto. Kann eine Länge (px, %, em) oder ein Schlüsselwort sein.
  15. 15Flex: 1
    Kurzform für flex: 1 1 0, das heißt das Element kann wachsen und schrumpfen, mit einer Basisgröße von 0. Items teilen sich den Platz gleichmäßig.
  16. 16Center an item with Flexbox
    Am Container: display: flex; justify-content: center; align-items: center. Zentriert entlang beider Achsen.
  17. 17CSS Grid
    Ein zweidimensionales Layout-System zur Erstellung komplexer Layouts mit Zeilen und Spalten. Für Seitenlayouts mächtiger als Flexbox.
  18. 18Create a grid container
    display: grid oder display: inline-grid anwenden. Direkte Kindelemente werden zu Grid-Items.
  19. 19Grid-template-columns
    Definiert die Spalten des Grids. Beispiel: grid-template-columns: 200px 1fr 2fr erzeugt 3 Spalten mit festgelegten Breiten.
  20. 20Grid-template-rows
    Definiert die Zeilen des Grids. Beispiel: grid-template-rows: 100px auto 50px erzeugt 3 Zeilen mit festgelegten Höhen.
  21. 21Fr unit in CSS Grid
    Fraktionale Einheit, die einen Anteil des verfügbaren Platzes darstellt. 1fr 2fr bedeutet, die zweite Spalte erhält doppelt so viel Platz wie die erste.
  22. 22Repeat()
    Wiederholt ein Muster. repeat(3, 1fr) erzeugt 3 gleich breite Spalten. repeat(auto-fit, minmax(200px, 1fr)) erzeugt responsive Spalten.
  23. 23Grid-gap (gap)
    Erzeugt Abstand zwischen Grid-Items. gap: 20px (alle), oder row-gap und column-gap getrennt. Moderne Syntax ist einfach gap.
  24. 24Grid-column
    Kurzform für grid-column-start / grid-column-end. Positioniert ein Element über mehrere Spalten. grid-column: 1 / 3 erstreckt sich über Spalte 1-2.
  25. 25Grid-row
    Kurzform für grid-row-start / grid-row-end. Positioniert ein Element über mehrere Zeilen. grid-row: 2 / 4 erstreckt sich über Zeile 2-3.
  26. 26Span multiple columns/rows
    grid-column: span 2 erstreckt sich über 2 Spalten, grid-row: span 3 über 3 Zeilen. Oder mit Liniennummern: grid-column: 1 / 4.
  27. 27Grid-area
    Kurzform für grid-row-start / grid-column-start / grid-row-end / grid-column-end, oder ein benannter Bereich.
  28. 28Grid-template-areas
    Definiert benannte Grid-Bereiche mittels einer visuellen ASCII-Art-Syntax. Elemente werden mit grid-area: <name> platziert.
  29. 29Give an example of grid-template-areas syntax.
    grid-template-areas: 'header header' 'sidebar main' 'footer footer'; Erzeugt 3 Zeilen, 2 Spalten mit benannten Bereichen.
  30. 30Grid-auto-flow
    Steuert, wie automatisch platzierte Items eingefügt werden. Werte: row (Standard), column, dense (füllt Lücken).

And 28 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 58 cards free