Flexbox

Question 1

flex-direction:

Answer 1

Sets the display direction of flex items:

row [default]
row-reverse
column
column-reverse

Question 2

flex-wrap:

Answer 2

Specifies whether flex items should wrap or not:

wrap
nowrap (default)
wrap-reverse

Question 3

flex-flow:

Answer 3

Shorthand for setting flex-direction then flex-wrap:

flex-flow: flex-direction flex-wrap

Question 4

justify-content:

Answer 4

Align items on the x-axis/cross axis/horizontal axis:

flex-start [default]
flex-end
center
space-around
space-between

Question 5

justify-content: flex-start

Answer 5

Display items at the beginning of the cross axis

Question 6

justify-content: flex-end

Answer 6

Display items at the end of the cross axis

Question 7

justify-content: center

Answer 7

Display items at the center of the cross axis

Question 8

justify-content: space-around

Answer 8

Display items with space before, between, and after the items

Question 9

justify-content: space-between

Answer 9

Display items on the cross axis with equal space between the items

Question 10

align-items:

Answer 10

Align items on the y-axis/vertical axis:

center
flex-start
flex-end
stretch [default]
baseline

Question 11

align-items: center

Answer 11

Display items in the middle of the y-axis

Question 12

align-items: flex-start

Answer 12

Display items at the top of the y-axis

Question 13

align-items: flex-end

Answer 13

Display items at the bottom of the y-axis

Question 14

align-items: stretch

Answer 14

Stretches the items to fill the entire y-axis container (default)

Question 15

align-items: baseline

Answer 15

Aligns items along their typographical baseline

Question 16

align-content:

Answer 16

Align the flex lines between flex items:

space-between
space-around
stretch
center
flex-start
flex-end

Question 17

align-content:space-between

Answer 17

Displays flex lines with equal space between them

Question 18

align-content: space-around

Answer 18

Displays flex lines with equal space before, between, and after them

Question 19

align-content: stretch (default)

Answer 19

Stretches the flex lines to fill it’s y-axis container

Question 20

align-content: center

Answer 20

Displays the (group) of flex lines in the middle of the container

Question 21

APPLICATION:

Perfect Centering with Flexbox

Answer 21

SOLUTION

Set both justify-content and align-items to center

Question 22

FLEX ITEM:

order:

Answer 22

Specify the order of the flex item (zero based):

-1
0 [default]
1
2

Question 23

FLEX ITEM:

flex-grow:

Answer 23

Specify how much a flex item will grow relative to other flex items:

0 [default]
1
2 (2x as fast)
8 (8x as fast)

Question 24

FLEX ITEM:

flex-shrink:

Answer 24

Specify how much a flex item will shrink relative to other flex items:

0
1 [default]

Question 25

FLEX ITEM:

flex-basis:

Answer 25

Specify the initial length (width) of a flex item:

50px
50rem
50%

Question 26

FLEX ITEM:

flex:

Answer 26

Shorthand property for flex-grow, flex-shrink, and flex-basis

flex: 1 0 50%
flex: [flex-grow] [flex-shrink] [flex-basis]

Question 27

FLEX ITEM:

align-self:

Answer 27

Specify the alignment for the selected item inside the flex container:

baseline
stretch
center
flex-start
flex-end