Flexbox

Question 1

display: flex

Answer 1

container property
Defines a flex container

Question 2

flex-direction

Answer 2

container property

row - (default, left to right)
row-reverse - right to left
column - top to bottom
column-reverse - bottom to top

Question 3

flex-wrap

Answer 3

container property

nowrap - default, all items will be on one line
wrap - will wrap onto multiple lines from top to bottom
wrap-reverse - will wrap onto multiple lines bottom to top

Question 4

flex-flow

Answer 4

container property

shorthand for flex-direction and flex wrap
default value is flex-flow: row nowrap

Question 5

justify-content

Answer 5

container property

aligns along main axis
flex-start - packed to start of flex-direction
flex-end - packed to end of flex direction
center - items centered along the line
space-around - itmes evenly distributed with equal space around them
space-between - items evenly distributed, first item on start line, last item on end line

Question 6

align-items

Answer 6

container property
aligns along the cross axis

stretch - default, stretch to fill the container (respecting min-width/max-width)
flex-start - placed at start of cross axis
flex-end - placed at end of cross axis
center - centered on the cross axis;
baseline - aligned so bases are aligned

Question 7

align-content

Answer 7

container property
Aligns content along the cross axis, like justify content
Only works with flex-wrap: wrap

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

Question 8

gap, row-gap, column-gap

Answer 8

container property
controls the space between items
does not control outer edges

Question 9

align-self

Answer 9

children property
overrides default alignment for individual flex-items
flex-start, flex-end, center, baseline, stretch

Question 10

order

Answer 10

children property
controls the order in which flex items appear

Question 11

flex-grow

Answer 11

children property
takes a unitless number
dtermines the amount of available space in the flex container an item will take up

Question 12

flex-shrink

Answer 12

children property
definies ability for a flex item to shrink if necessary
takes a unitless number

Question 13

flex-basis

Answer 13

children property
defines the default size of an element
can be lenght or keyword

Question 14

flex

Answer 14

children property
Shorthand for flex-grow, flex-shrink, flex-basis
e.g. flex: 2 1 30em;

Question 15

flex-flow

Answer 15

container property
Shorthand for flex-direction and flex-wrap
e.g. flex-flow: row wrap

Question 16

place-content

Answer 16

container property
Shorthand for align-content and justify-content
e.g. place-content: center flex-end
(aligns content center, and justifies content flex end)