Responsive Layout Flashcards
Define CSS Media Query
a set of CSS rules that get applied based on device or characteristics
Define min-width and max-width
At min-width the target will not become smaller than than the given value and at max-width the target will not become bigger than the given value but can be anywhere in between.
By default ‘display:flex’ creates:
The element behaves like a block element and lays out its content according to the flexbox model
Define flex-basis
flex-basis is the size of flex items before they are placed into a flex container
What’s the flex-basis formula?
content -> width -> flex-basis (limited by min and max width)
‘justify-content’ property:
lets you control the position and alignment of flex items on the main axis and how space should be distributed in a flex container
What will margin: auto do to a flex item
Margin auto absorbs any extra space around a flex item and push other flex items into different positions
The order property is a flex-container property? True or False
False, the order property can only be applied to a flex item
The default order value is what for flex-items
0
What flex property allows us to position, align, and distribute space between our items?
justify-content
‘flex-grow’ is a flex item only property - true or false
True
What will ‘flex-grow: 1;’ do to a single flex item
That item will take 1x as much space relative to the other items.
Define the ‘flex’ shorthand property
This property consist of the flex: ‘flex-grow’ ‘flex-basis’ & ‘flex-shrink’
What happens when we use the flex shorthand with flex-basis being set to it’s default 0
When the viewport gets narrow the space is not distributed because the items can shrink all the way down to 0
What effect does margin: auto have on flex items?
It effects item alignment because it absorbs any extra around a flex item and pushes other flex items into different positions
