Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Lambda School > [S1L3] User Interface 3 > Flashcards

[S1L3] User Interface 3 Flashcards

-Flexbox -Flexbox Container

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?

A
  • Verhindert das items aus dem Container Space flowen

- Der Default ist nowrap

20
Q

Wann ist flex-wrap besonder wichtig?

A

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

21
Q

Was macht flex-wrap: wrap;?

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?

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?

A

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

24
Q

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

A

-Main-Axis

25
Q

Wann kann man justify-content benutzen?

A

-Jedes Mal wenn man flex items anhand der main axis stylen möchte

26
Q

Was ist der default-value von justify-content?

A

-flex-start, also den Content an den Anfang der main-axis bringen.

27
Q

Welche Möglichkeiten bietet justify-content alles?

A
  • 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
Q

Was ist die cross-axis?

A

-Die vertikale Axe/inverse Axe der main axis

29
Q

Was macht align-item?

A

-Richtiet flex Items nach der cross axis aus

30
Q

Woran sollte man immer direkt denken, wenn man align liest?

A

-Cross axis

31
Q

Woran soll man bei justify und woran bei align denken?

A
  • justify main axis

- align cross axis

32
Q

Was ist der default Value von align?

A
  • stretch

- Default value, welches das item über den ganzen container space füllt

33
Q

Welche Funktionen bietet align-items an?

A
  • 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
Q

Was macht align-content?

A
  • 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
Q

Können mehrere Eigenschaften genutzt in flexboxen genutzt werden?

A

-Ja, auch wenn schon einzelne Befehle das Positionieren sehr erleichtern

36
Q

Respektiert flexbox as Box-Modell?

A

-Ja, auch mit flexbox können Content, Padding, Border und Margin weiterhin angepasst werden.

37
Q

Was macht die order Eigenschaft von Elementen in einer flexbox?

A

-ändert die Reihenfolge der Elemente von flex Elementen

.yellow {order: 1; }

38
Q

Was macht die CSS flex Eigenschaft align-self?

A

-Ändert nur die Align-Eigenschaft eines einzelnen Elementes.

39
Q

Kann man mit flex img und p als children items mischen?

A

-Ja

40
Q

Ist CSS Grid neuer als Flexbox?

A

-Ja

41
Q

Was macht die flexbox Eigenschaft align-content ?

A

-Legt den Abstand zwischen vielen Elementen auf einer Seite fest.

42
Q

Warum sollte man Flexbox über CSS Grid benutzen?

A

-Nicht alle Browser unterstützen CSS Grid

43
Q

Was sind Nachteile von flexbox?

A

-Der Browser muss viel rechnen und wird langsamer

44
Q

Was macht flex-grow?

A

-Versucht die flexbox items zu vergrößern

45
Q

Was macht flex-shrink?

A

-Versucht die flexbox items zu verkleinern

46
Q

Wie sollte man flexbox benutzen?

A
  • Am besten nur für die Superstruktur der Seite

- Dann versuchen es so viel wie möglich zu vermeiden

47
Q

Gibt es nested flexboxes weil eine flexbox nur 1 level tief ist?

A

Ja

Lambda School (59 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions