Lambda School > [S1L3] User Interface 3 > Flashcards

[S1L3] User Interface 3 Flashcards

-Flexbox -Flexbox Container (47 cards)

Study These Flashcards
1
Q

Was ist flexbox?

A

-Ein Module

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Warum ist flexbox so anders als nur mit display zur arbeiten?

A
  • Weil display nun mehrere effekte gleichzeitig zum Element hinzufügt.
  • color: red; macht nur rot, aber display :flex gibt Elementen noch mehr neue Fähigkeiten
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Wie kann man eine flexbox definieren?

A

-display: flex;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Was passiert wenn man display: flex; schreibt?

A

-Es wird ein flex container erschaffen, welcher eine Reihe neuer Funktionalitäten mit sich bringt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Welche neuen Properties erhält man durch den Einsatz von display: flex?

A
  • flex-direction macht, dass alles in eine Reihe ausgeweitet wird anstatt eine Zeile
  • flex-wrap
  • flexc-flow
  • justify-content
  • align-items
  • align-content
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Was macht flex-direction?

A

-ordnet die flex items in eine angegebene Richtung an

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Wie nennt man ein Element nachdem man display:flex auf dieses benutzt hat?

A

-Flex Container

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was sind flex items?

A

-Alle Elemente, die in einem flex container sind.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Wie tief darf man in flex container nesten?

A

-NUR 1 LEVEL tief!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Wenn man ein nav zu einem flex-container macht und die anchor tags darin dann flex items werden, sind es die Inhalte der anchor tags auch?

A

-Nein,, nur ein Level tief sind die flex Items!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Warum ist es nicht semantisch divs zu nutzen?

A

-Weil sie keine Aussagekraft haben über ihre Position oder Bedeutung.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Wie bekommt meine die Items einer flexbox nicht horizontal, sondern vertikal?

A

flex-direction: column

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Wen betrifft die Eigenschaft display. flex?

A
  • Den Parent Container als Style

- Die obersten Items als Children Item, welche das Verhalten anzeigen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was macht flex-direction?

A
  • Alle flex Items folgen der angegebenen Richtung
  • Die Richtung ist als main axis bekannt
  • Der Default ist row, kann aber auf column geändert werden
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Was macht flex-direction: row-reverse ?

A

-Die Items flowen von links nach rechts in den Bildschirm

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

was macht flex-direction: columns-reverse?

A

-Die Itemns flowen von bottom nach top in den Bildschirm.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Was passiert oft bei flex items?

A

-Sie flowen über den container rüber

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Wie kann man ein herausflowen von items aus dem container Space verhindern?

A

-Durch flex-wrap

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

was macht flex-wrap?

Study These Flashcards
A
  • Verhindert das items aus dem Container Space flowen

- Der Default ist nowrap

20
Q

Wann ist flex-wrap besonder wichtig?

Study These Flashcards
A

Wenn man z.B. eine ungewisse Anzahl an Items anzeigen lassen will

21
Q

Was macht flex-wrap: wrap;?

Study These Flashcards
A

-Sobald ein Item den Rand des Container Spaces erreicht wrapt es in die nächste Reihe von top zu bottom

22
Q

Was macht flex-wrap: wrap-reverse?

Study These Flashcards
A

-Sobald ein Item den Rand des Container Spaces erreicht wrapt es in die nächste Reihe jedoch von bottom zu top

23
Q

Was macht flex-flow?

Study These Flashcards
A

-Kurzversion für flex-direction und flex-wrap

24
Q

Woran sollte man denken, wenn man das Wort justify hört?

25
Wann kann man justify-content benutzen?
-Jedes Mal wenn man flex items anhand der main axis stylen möchte
26
Was ist der default-value von justify-content?
-flex-start, also den Content an den Anfang der main-axis bringen.
27
Welche Möglichkeiten bietet justify-content alles?
- flex start (Anfang von main Axis) - flex-end (Ende von main Axis) - center (center der main axis) - space-between (even space between items on main axis) - space-around (equal space between items on main axis)
28
Was ist die cross-axis?
-Die vertikale Axe/inverse Axe der main axis
29
Was macht align-item?
-Richtiet flex Items nach der cross axis aus
30
Woran sollte man immer direkt denken, wenn man align liest?
-Cross axis
31
Woran soll man bei justify und woran bei align denken?
- justify main axis | - align cross axis
32
Was ist der default Value von align?
- stretch | - Default value, welches das item über den ganzen container space füllt
33
Welche Funktionen bietet align-items an?
- stretch (DEFAULT füllt ganzen space) - flext-start (items auf start von cross axis) - flex-end (items auf ende von cross axis) - center (items in center von cross axis) - baseline (items alignen mit bottom base des contents der cross axis)
34
Was macht align-content?
- stretch (DEFAULT füllt ganzen space) - flex start (Anfang von cross Axis) - flex-end (Ende von cross Axis) - center (center der cross axis) - space-between (even space between items on cross axis) - space-around (equal space between items on cross axis)
35
Können mehrere Eigenschaften genutzt in flexboxen genutzt werden?
-Ja, auch wenn schon einzelne Befehle das Positionieren sehr erleichtern
36
Respektiert flexbox as Box-Modell?
-Ja, auch mit flexbox können Content, Padding, Border und Margin weiterhin angepasst werden.
37
Was macht die order Eigenschaft von Elementen in einer flexbox?
-ändert die Reihenfolge der Elemente von flex Elementen .yellow {order: 1; }
38
Was macht die CSS flex Eigenschaft align-self?
-Ändert nur die Align-Eigenschaft eines einzelnen Elementes.
39
Kann man mit flex img und p als children items mischen?
-Ja
40
Ist CSS Grid neuer als Flexbox?
-Ja
41
Was macht die flexbox Eigenschaft align-content ?
-Legt den Abstand zwischen vielen Elementen auf einer Seite fest.
42
Warum sollte man Flexbox über CSS Grid benutzen?
-Nicht alle Browser unterstützen CSS Grid
43
Was sind Nachteile von flexbox?
-Der Browser muss viel rechnen und wird langsamer
44
Was macht flex-grow?
-Versucht die flexbox items zu vergrößern
45
Was macht flex-shrink?
-Versucht die flexbox items zu verkleinern
46
Wie sollte man flexbox benutzen?
- Am besten nur für die Superstruktur der Seite | - Dann versuchen es so viel wie möglich zu vermeiden
47
Gibt es nested flexboxes weil eine flexbox nur 1 level tief ist?
Ja
Lambda School
flashcards
Decks in class (59)
# Cards
Brainscape helps you reach your goals faster, through stronger study habits.
© 2026 Bold Learning Solutions. Terms and Conditions