Flex Box

Question 1

align-content

Answer 1

determines the vertical spacing between lines to set how multiple lines are spaced apart from each other

Question 2

What are the values available for align-content?

Answer 2

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.

Question 3

justify-content

Answer 3

aligns items horizontally

Question 4

What are the values available for justify-content?

Answer 4

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.

Question 5

align-items

Answer 5

aligns items vertically

Question 6

What are the values available for align-items?

Answer 6

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

Question 7

flex-direction

Answer 7

defines the direction items are placed in the container

Question 8

What are the values available for flex-direction?

Answer 8

row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

Question 9

order

Answer 9

reorder items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Question 10

align-self

Answer 10

This property accepts the same values as align-items and its value for the specific item.

.yellow {
align-self: flex-end;
}

Question 11

flex-wrap

Answer 11

Spread out items on other rows

Question 12

What are the values available for flex-wrap?

Answer 12

nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.

Question 13

The two properties flex-direction and flex-wrap are used so often together that the shorthand property _______ was created to combine them

Answer 13

flex-flow

Example:
flex-flow: flex-direction flex-wrap;
flex-flow: column wrap;

Question 14

align-content: flex-start;

Answer 14

Lines are packed at the top of the container.

Question 15

align-content: flex-end;

Answer 15

Lines are packed at the bottom of the container.

Question 16

align-content: center;

Answer 16

Lines are packed at the vertical center of the container.

Question 17

align-content: space-between;

Answer 17

Lines display with equal spacing between them.

Question 18

align-content: space-around;

Answer 18

Lines display with equal spacing around them.

Question 19

align-content: stretch;

Answer 19

Lines are stretched to fit the container.

Question 20

justify-content: flex-start;

Answer 20

Items align to the left side of the container.

Question 21

justify-content: flex-end;

Answer 21

Items align to the right side of the container.

Question 22

justify-content: space-between;

Answer 22

Items display with equal spacing between them.

Question 23

justify-content: space-around;

Answer 23

Items display with equal spacing around them.

Question 24

align-items: flex-start;

Answer 24

Items align to the top of the container.

Question 25

align-items: flex-end;

Answer 25

Items align to the bottom of the container.

Question 26

align-items: center;

Answer 26

Items align at the vertical center of the container

Question 27

align-items: baseline;

Answer 27

Items display at the baseline of the container

Question 28

align-items: stretch;

Answer 28

Items are stretched to fit the container.

Question 29

flex-direction: row;

Answer 29

Items are placed the same as the text direction.

Question 30

flex-direction: row-reverse;

Answer 30

Items are placed opposite to the text direction.

Question 31

flex-direction: column;

Answer 31

Items are placed top to bottom.

Question 32

flex-direction: column-reverse;

Answer 32

Items are placed bottom to top.

Question 33

flex-wrap: nowrap;

Answer 33

Every item is fit to a single line.

Question 34

flex-wrap: wrap;

Answer 34

Items wrap around to additional lines.

Question 35

flex-wrap: wrap-reverse;

Answer 35

Items wrap around to additional lines in reverse.