Flexbox

Question 1

What is flexbox?

Answer 1

It is a group of items in a row or column.
display: flex; or display: inline-flex;

Question 2

How do you set the flexbox to go down?

Answer 2

flex-direction: column;

Question 3

Container or child? What does it do and how do you use it?
flex-direction?

Answer 3

Container. flex-direction: row;
There are also column, row-reverse, column-reverse

Question 4

Container or child? What does it do and how do you use it?
flex-basis?

Answer 4

Container. It sets the size of each item in the flexbox.
flex-basis: 100px;

It is linked to the flex-direction. If -row then flex-basis is the width, If -column then flex-basis is the height.

Question 5

What is justify-content? What are it’s values?

Answer 5

justify-content determines how the “boxes” appear in the container they are in.

JC’s safe values are flex-start, flex-end, center.

Other values like space-between are not used in all browsers

Question 6

Container or child? What does it do and how do you use it?
flex-wrap:

Answer 6

Container. It allows boxes to wrap to the next line when the screen gets too narrow.
nowrap is default, wrap will wrap

Question 7

Container or child? What does it do and how do you use it?
order:

Answer 7

Child. You can move the boxes around on the screen. lowest order number to the left.

Question 8

Container or child? What does it do and how do you use it?
justify-content:

Answer 8

Container. flex-start is default and starts at the left edge and goes along the main-axis.
flex-end will start at the right side of the page.
center will center the boxes.

Question 9

Container or child? What does it do and how do you use it?
align-items

Answer 9

Container. This aligns the items along the cross axis. ie.. if flex-direction is row, align-items goes from top to bottom.

Question 10

In “height: 70vh;” what does vh stand for and why would you use it?

Answer 10

viewport height. it is the size of the container along the cross axis.

Question 11

Container or child? What does it do and how do you use it?
align-self

Answer 11

Child.

Question 12

Container or child? What does it do and how do you use it?
align-content

Answer 12

Container. This only works when flex-wrap is set to wrap.

Question 13

Container or child? What does it do and how do you use it?
flex-grow and flex-shrink

Answer 13

Container. default, shrink is on and grow is off.
flex-shrink: 1;