Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

CSS > Flexbox > Flashcards

Flexbox Flashcards

1
Q

Which CSS property defines flex block container?

A

display: flex;

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

Which CSS property defines flex inline container?

A

display: inline-flex;

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

Which CSS property establishes the main-axis of the flex container?

A

flex-direction

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

Which axis defines the direction that flex items are placed in the flex container?

A

main-axis

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

How can you set the main-axis of flex container from left to right in ltr?

A

flex-direction: row;

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

How can you set the main-axis of flex container from top to bottom?

A

flex-direction: column;

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

How can you set the main-axis of flex container from bottom to top in reverse order?

A

flex-direction: column-reverse;

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

How can you set the main-axis of flex container from right to left in rtl?

A

flex-direction: row;

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

How can you set the main-axis of flex container from right to left in ltr?

A

flex-direction: row-reverse;

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

How can you set the main-axis of flex container from left to right in rtl?

A

flex-direction: row-reverse;

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

What is the default wrapping behaviour of flex container?

A

nowrap

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

Which CSS property changes the wrapping behaviour of flex container?

A

flex-wrap

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

What are the possible values of flex-wrap property?

A

nowrap | wrap | wrap-reverse

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

How can you tell flex container that you want flex items will wrap onto multiple lines, from top to bottom?

A

flex-wrap: wrap;

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

How can you tell flex container that you want flex items will wrap onto multiple lines, from bottom to top?

A

flex-wrap: wrap-reverse;

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

How can you tell flex container that flex items should not wrap?

A

flex-wrap: nowrap;

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

Shorthand for the ‘flex-direction’ and ‘flex-wrap’ properties.

A

flex-flow

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

Default values for ‘flex-flow’ property.

A

flex-flow: row nowrap;

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

Which property defines the alignment along the main axis of flex container?

A

justify-content

20
Q

Default value for justify-content property of flex container.

A

justify-content: flex-start;

21
Q

Pack the flex items toward the start of the flex-direction

A

justify-content: flex-start;

22
Q

Pack the flex items toward the end of the flex-direction

A

justify-content: flex-end;

23
Q

Center flex items along the main-axis

A

justify-content: center;

24
Q

Distribute flex-items evenly along the main-axis; so that first item is on the start line, last item on the end line

A

justify-content: space-between;

25
Q

Distribute flex-items along the main-axis, so that the spacing between any two items, and the space to the edges is equal.

A

justify-content: space-evenly;

26
Q

Distribute flex-items along the main-axis, so that all the items have equal space on both sides.

A

justify-content: space-around;

27
Q

Which CSS property defines the default behavior for how flex items are laid out along the cross axis?

A

align-items

28
Q

Default value for align-items property of flexbox.

29
Q

Place flex items at the start of the cross axis.

A

align-items: flex-start;

30
Q

Place flex items at the end of the cross axis.

A

align-items: flex-end;

31
Q

Center flex items in the cross-axis.

A

align-items: center;

32
Q

Align flex items as their baselines.

A

align-items: baseline;

33
Q

Which CSS property is used to manage the positioning of wrapped flex items?

A

align-content

34
Q

Which property is used to align individual items of flex-container

A

align-self

35
Q

What is the default order of flex items?

36
Q

Which property is used to change the flex item order?

37
Q

Which property triggers the ability for a flex item to grow if necessary.

A

flex-grow: #

38
Q

What unit is used by flex-grow property?

A

It has no units, it defines a proportion. It dictates what amount of the available space inside the flex container the item should take up.

39
Q

If all items have flex-grow set to 1, how will the remaining space in the container be distributed?

A

equally to all children.

40
Q

opposite property of flex-grow

A

flex-shrink

41
Q

which rule doesn’t allow items to shrink

A

flex-wrap: wrap;

42
Q

What flex-shrink value establish

A

How fast the item will shrink, for example flex-shrink: 5 will shrink the item 5 times faster than flex-shrink: 1, 0 value do not shrink at all

43
Q

What is the default flex-basis

44
Q

What flex-basis specifies?

A

actual length of the specific item depending on the flex-direction of the container

45
Q

If the width and height of a specific flex item is defined, what is the behavior of flex-basis?

A

flex-basis overrides one of them depending on the flex-direction of the container.

46
Q

What is teh shorthand property for all of the following properties: flex-grow, flex-shrink, flex-basis

A

flex; 0 1 auto

precise syntax is:

flex: none | [ ? || ]

CSS (2 decks)

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