Module 04-03 CSS Grid, Flexbox, & Responsive Design Flashcards
What units are used to create relative column or row dimensions?
fr (fraction of the available space)
What property adds space between grid items?
grid-gap
What unit of measurement sets an item in relationship to the viewport height?
vh (as a percentage, i.e. 100vh for 100% of the viewport height)
What unit of measurement sets an item in relationship to the viewport width?
vw (as a percentage, i.e. 100vw for 100% of the viewport width)
What is the column axis called?
The block axis
What is the row axis called?
The inline axis
Along what axis does align-items align?
The block axis
Along what axis does justify-items align?
The inline axis
What is the default alignment?
stretch - fills the whole height and width of a cell
What is responsive design?
Design that responds to the user’s behavior and environment based on screen size, platform, and orientation - one site for every screen
What are the three key areas of responsive design?
Flexible/Fluid Grid Layouts, Resizable Images, CSS Media Queries
What do you use to conditionally apply CSS styles?
Media queries
What is a breakpoint?
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)
What is mobile first?
Designing for mobile devices first, expanding as setting a breakpoint once it no longer looks good!
What is a Flexbox made up of?
A flex container that contains one or more flex items
How are flexbox items laid out by default?
Horizontally
What CSS property defines a flexbox layout as either a row or a column?
flex-direction (: column, or : row)
What is the default behavior of flex-grow?
A flex item will take up the maximum vertical space but only the required horizontal space in the flex container.
What property specifies the initial size of a flexbox item?
flex-basis
Which two properties allow flex items to take up more or less relative space by using a fraction ?
flex-grow and flex-shrink (i.e. flex-grow: 2 to take up 2 parts of the available space)
What property allows the flow of items to continue naturally when the size of the screen changes?
flex-wrap: wrap;
What property controls the order in which items appear in the flexbox container?
order - using positive or negative values to move to the right of the end (+) or left of the beginning (-)
Use what property value to arrange items with an equal amount of space between the boundaries and each other?
space-evenly
Use what property value to arrange items with an equal amount of space between each other?
space-between
Use what property value to arrange items with an equal amount of space between inner items?
space-around
Should Grid or Flexbox be used for a two-dimension layout?
Grid
Should Grid or Flexbox be used for a one-dimensional layout?
Flexbox
Should Grid or Flexbox be used when design is based upon content?
Flexbox
Should Grid or Flexbox be used when design is based upon structure?
Grid
