Responsiveness Flashcards
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 >
Flex - basis vs width when using flex box?
Use flex - basis = better flexibility and responsiveness.
when you have your items lined on your main axis, and want to align only one specifiy item on the cross axis… how?
select that item, and use the property, “ align-self”
align-items vs align-content
align items = where they are on cross axis
align-content = how far apart between the wrap lines
