Creating Responsive Pages with CSS FlexBox Flashcards

1
Q

Why does Flexbox exist? What does it deprecates?

A

To simplify responsive layout creation. Deprecates the float system.

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

What are the two main actors on flexbox?

A

The flexbox container and the flex item.

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

What’s flexbox container?

A

Parent object that contains flex items.

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

What’s flex item?

A

Primary objects within the flex container.

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

Are the flex behavior cascaded down to flex item’s inner elements?

A

No.

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

Can a flex item also be a flex container of other flex items?

A

Yes.

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

What does the “flexbox row” do?

A

Align the flex items in a row (horizontally)

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

What does the “flexbox column” do?

A

Align the flex items in columns (vertically).

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

What is the default direction of flexbox?

A

Row.

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

What is the main axis, what are the two coordinates it has? Can the direction be inverted?

A

Can be horizontal or vertical. Has the main start and main end. Yes.

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

What is the cross axis? What are the two coordinates it has?

A

Is perpendicular to the main axis. Can be horizontal or vertical (opposite direction of the main axis). Has the cross start and cross end.

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

How the main and cross axis sizes are determined?

A

Via the height and width of the flex items.

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

How to design a webpage using flexbox?

A

You need to define if the initial design is row or column. Then determine if inside these flex items there will be other flex containers (and their orientation - row or column)

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

How to make a container to become a flex container using css?

A

display: flex;

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

How to change the default behavior of the flex row to flex column using css?

A

flex-direction: column;

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

What is the shorthand to write a div with the class box on it?

A

write div.box then tab

17
Q

What is the default behavior of the flex items when the screen is reduced?

A

All the flex items within the container will be squished accordingly and have the space distributed equally.

18
Q

How to change the default behavior of the flex item of squishing the content to instead make items to go to the next page?

A

flex-wrap: wrap

19
Q

How to arrange the flex items to have spaces in between?

A

justify-content: space-evenly

20
Q

What does the align-items: center; do?

A

Align the items in of the cross axis.

21
Q

What does the align-content do?

A

Align the items when multiple rows or columns are used. e.g: align-content: center

22
Q

How to make a flex item to be placed in a different part of the screen?

A

You can use order. e.g: order: 1

23
Q

How to make one flex item take twice more space than others? How to make twice as smaller than others?

A

flex-grow: 2

flex-shrink: 2

24
Q

How to make a flex item to take 60% of the space available?

A

flex-basis: 60%

25
Q

What does the align-self do?

A

Align the specific item. e.g: center.

26
Q

When to not use flexbox? What should I use instead?

A

In complex systems… grids.

27
Q

When to use flexbox?

A

For components.