Responsiveness

Question 1

In flexbox what is main vs cross axis?

Answer 1

Main = main direction of your flex box

Cross = opposite direction of main axis

Question 2

In flexbox, what is main size vs cross size?

Answer 2

Main size = length of main axis

Cross size = length of cross axis

Question 3

What property creates a flex box?

Answer 3

.container {
Display : flex ( or inline flex)

Question 4

How to code direction of your flex box?

Answer 4

Property = flex -direction

Values:
Row = L to R
Row - reverse = R to L
Column = top to Bottom
Column - reverse = bottom to top

Question 5

Flex items will stay on one line. How to break into multiple lines?

Answer 5

.container {
Flex - wrap : nowrap, wrap (top to bottom), or wrap-reverse

Question 6

How to write short hand for a flex box direction and if it wraps or not?

Answer 6

.container {

Flex-flow : column wrap ;

Question 7

How to control the extra space around your items in your flexbox?

Answer 7

.container {

Property = justify - content

Question 8

How do you align your flex items along your CROSS axis of flex box?

Answer 8

.container {
Property = align - items

Question 9

When choosing the spacing of your flex items. Which property is cross axis vs main axis?

Answer 9

Cross axis = align - items
Main axis = justify - content

Question 10

You want to make a media query for all media types between 400px and 900px

Answer 10

@ media all and ( min - width : 400px ) and ( max - width : 900 px )

Question 11

How to make your sections stack for smaller screens like mobile phones?

Answer 11

Make the section widths = 100%

Question 12

How to remove something completely from a page vs making it invisible?

Answer 12

Remove = display : none

Hide = visibility : hidden

Question 13

Make flex items line up on the far Left of main axis. Far right?

Answer 13

L = Justify - content : flex - start

R = justify - content : flex - end

Question 14

How to center flex items along the main axis?

Answer 14

Justify - content : center

Question 15

You want your items to be evenly spaced along main - axis but have first and last item touch the border.

Answer 15

Justify - content : space - between ;

Question 16

Difference between the following justify - content values?

Space - around
Space - evenly

Answer 16

Space - around = equal space on both sides of item

Space - evenly = equal space between all items

Question 17

What are the different values for the property, align - items?

Answer 17

Flex - start , flex - end, center, stretch, baseline

Question 18

When using “ align - items “, what is stretch vs baseline value?

Answer 18

Stretch = all items fill container

Baseline = baselines of all items line up

Question 19

You’ve broken your flex container into multiple lines and now want to align each of them within the container. What property and values?

Answer 19

Align - content : flex - start, flex - end, center, stretch, space - between , space - around ;

Question 20

You have multiple rows in your flex - container and want to control the gap between them. How?

Answer 20

Gap = both sides

Row - gap

Column - gap

Question 21

You want the items in your flex container to automatically size up to fill the space they get.

Answer 21

.item {
Flex - grow : 1 (2, 3, 4 )

1 = all equal
2 = twice as much space…

Question 22

You want the items in your flex container to shrink as necessary in relation to flex container.

Answer 22

.item {
Flex - shrink : 1, 2, 3, or more

Question 23

You want to lock in the default size of a flex item before remaining space is distributed.

Answer 23

.item {
Flex - basis : auto

Question 24

How to assign width to flex items?

Answer 24

Flex - basis : < length integer >

Question 25

Flex - basis vs width when using flex box?

Answer 25

Use flex - basis = better flexibility and responsiveness.

Question 26

when you have your items lined on your main axis, and want to align only one specifiy item on the cross axis… how?

Answer 26

select that item, and use the property, “ align-self”

Question 27

align-items vs align-content

Answer 27

align items = where they are on cross axis

align-content = how far apart between the wrap lines