Responsiveness Flashcards
(27 cards)
In flexbox what is main vs cross axis?
Main = main direction of your flex box
Cross = opposite direction of main axis
In flexbox, what is main size vs cross size?
Main size = length of main axis
Cross size = length of cross axis
What property creates a flex box?
.container {
Display : flex ( or inline flex)
How to code direction of your flex box?
Property = flex -direction
Values:
Row = L to R
Row - reverse = R to L
Column = top to Bottom
Column - reverse = bottom to top
Flex items will stay on one line. How to break into multiple lines?
.container {
Flex - wrap : nowrap, wrap (top to bottom), or wrap-reverse
How to write short hand for a flex box direction and if it wraps or not?
.container {
Flex-flow : column wrap ;
How to control the extra space around your items in your flexbox?
.container {
Property = justify - content
How do you align your flex items along your CROSS axis of flex box?
.container {
Property = align - items
When choosing the spacing of your flex items. Which property is cross axis vs main axis?
Cross axis = align - items
Main axis = justify - content
You want to make a media query for all media types between 400px and 900px
@ media all and ( min - width : 400px ) and ( max - width : 900 px )
How to make your sections stack for smaller screens like mobile phones?
Make the section widths = 100%
How to remove something completely from a page vs making it invisible?
Remove = display : none
Hide = visibility : hidden
Make flex items line up on the far Left of main axis. Far right?
L = Justify - content : flex - start
R = justify - content : flex - end
How to center flex items along the main axis?
Justify - content : center
You want your items to be evenly spaced along main - axis but have first and last item touch the border.
Justify - content : space - between ;
Difference between the following justify - content values?
Space - around
Space - evenly
Space - around = equal space on both sides of item
Space - evenly = equal space between all items
What are the different values for the property, align - items?
Flex - start , flex - end, center, stretch, baseline
When using “ align - items “, what is stretch vs baseline value?
Stretch = all items fill container
Baseline = baselines of all items line up
You’ve broken your flex container into multiple lines and now want to align each of them within the container. What property and values?
Align - content : flex - start, flex - end, center, stretch, space - between , space - around ;
You have multiple rows in your flex - container and want to control the gap between them. How?
Gap = both sides
Row - gap
Column - gap
You want the items in your flex container to automatically size up to fill the space they get.
.item {
Flex - grow : 1 (2, 3, 4 )
1 = all equal
2 = twice as much space…
You want the items in your flex container to shrink as necessary in relation to flex container.
.item {
Flex - shrink : 1, 2, 3, or more
You want to lock in the default size of a flex item before remaining space is distributed.
.item {
Flex - basis : auto
How to assign width to flex items?
Flex - basis : < length integer >
