Module 04-03 CSS Grid, Flexbox, & Responsive Design Flashcards

1
Q

What units are used to create relative column or row dimensions?

A

fr (fraction of the available space)

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

What property adds space between grid items?

A

grid-gap

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

What unit of measurement sets an item in relationship to the viewport height?

A

vh (as a percentage, i.e. 100vh for 100% of the viewport height)

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

What unit of measurement sets an item in relationship to the viewport width?

A

vw (as a percentage, i.e. 100vw for 100% of the viewport width)

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

What is the column axis called?

A

The block axis

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

What is the row axis called?

A

The inline axis

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

Along what axis does align-items align?

A

The block axis

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

Along what axis does justify-items align?

A

The inline axis

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

What is the default alignment?

A

stretch - fills the whole height and width of a cell

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

What is responsive design?

A

Design that responds to the user’s behavior and environment based on screen size, platform, and orientation - one site for every screen

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

What are the three key areas of responsive design?

A

Flexible/Fluid Grid Layouts, Resizable Images, CSS Media Queries

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

What do you use to conditionally apply CSS styles?

A

Media queries

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

What is a breakpoint?

A

Points at which a page behaves differently, typical set by something like screen size (i.e. a media query with max-width: 600px or min_width: 768px)

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

What is mobile first?

A

Designing for mobile devices first, expanding as setting a breakpoint once it no longer looks good!

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

What is a Flexbox made up of?

A

A flex container that contains one or more flex items

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

How are flexbox items laid out by default?

A

Horizontally

17
Q

What CSS property defines a flexbox layout as either a row or a column?

A

flex-direction (: column, or : row)

18
Q

What is the default behavior of flex-grow?

A

A flex item will take up the maximum vertical space but only the required horizontal space in the flex container.

19
Q

What property specifies the initial size of a flexbox item?

A

flex-basis

20
Q

Which two properties allow flex items to take up more or less relative space by using a fraction ?

A

flex-grow and flex-shrink (i.e. flex-grow: 2 to take up 2 parts of the available space)

21
Q

What property allows the flow of items to continue naturally when the size of the screen changes?

A

flex-wrap: wrap;

22
Q

What property controls the order in which items appear in the flexbox container?

A

order - using positive or negative values to move to the right of the end (+) or left of the beginning (-)

23
Q

Use what property value to arrange items with an equal amount of space between the boundaries and each other?

A

space-evenly

24
Q

Use what property value to arrange items with an equal amount of space between each other?

A

space-between

25
Use what property value to arrange items with an equal amount of space between inner items?
space-around
26
Should Grid or Flexbox be used for a two-dimension layout?
Grid
27
Should Grid or Flexbox be used for a one-dimensional layout?
Flexbox
28
Should Grid or Flexbox be used when design is based upon content?
Flexbox
29
Should Grid or Flexbox be used when design is based upon structure?
Grid