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

Question 1

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

Answer 1

fr (fraction of the available space)

Question 2

What property adds space between grid items?

Answer 2

grid-gap

Question 3

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

Answer 3

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

Question 4

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

Answer 4

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

Question 5

What is the column axis called?

Answer 5

The block axis

Question 6

What is the row axis called?

Answer 6

The inline axis

Question 7

Along what axis does align-items align?

Answer 7

The block axis

Question 8

Along what axis does justify-items align?

Answer 8

The inline axis

Question 9

What is the default alignment?

Answer 9

stretch - fills the whole height and width of a cell

Question 10

What is responsive design?

Answer 10

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

Question 11

What are the three key areas of responsive design?

Answer 11

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

Question 12

What do you use to conditionally apply CSS styles?

Answer 12

Media queries

Question 13

What is a breakpoint?

Answer 13

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)

Question 14

What is mobile first?

Answer 14

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

Question 15

What is a Flexbox made up of?

Answer 15

A flex container that contains one or more flex items

Question 16

How are flexbox items laid out by default?

Answer 16

Horizontally

Question 17

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

Answer 17

flex-direction (: column, or : row)

Question 18

What is the default behavior of flex-grow?

Answer 18

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

Question 19

What property specifies the initial size of a flexbox item?

Answer 19

flex-basis

Question 20

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

Answer 20

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

Question 21

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

Answer 21

flex-wrap: wrap;

Question 22

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

Answer 22

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

Question 23

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

Answer 23

space-evenly

Question 24

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

Answer 24

space-between

Question 25

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

Answer 25

space-around

Question 26

Should Grid or Flexbox be used for a two-dimension layout?

Answer 26

Grid

Question 27

Should Grid or Flexbox be used for a one-dimensional layout?

Answer 27

Flexbox

Question 28

Should Grid or Flexbox be used when design is based upon content?

Answer 28

Flexbox

Question 29

Should Grid or Flexbox be used when design is based upon structure?

Answer 29

Grid