flex box

Question 1

display: flex;

Answer 1

turns container into flex container

Question 2

main axis

Answer 2

x-axis

Question 3

cross axis

Answer 3

y-axis

Question 4

what are child elements called of flex container

Answer 4

flex items

Question 5

flex-direction

Answer 5

sets main axis

Question 6

flex-wrap

Answer 6

controls whether items should wrap or not when they exceed containers width

allows items to appear on multiple lines

Question 7

justify-content

Answer 7

aligns items along main axis

Question 8

align-items

Answer 8

aligns items along cross axis

Question 9

align-content

Answer 9

aligns multiple lines of items along cross axis

Question 10

align-self

Answer 10

overrides the default or assigned (with align-items) alignment for an individual item in a flex container

Question 11

flex-grow

Answer 11

controls how much a flex item should grow relative to the other items when there is available space

Question 12

flex-shrink

Answer 12

controls how much a flex item should shrink relative to the other items when there is not enough space

Question 13

flex-basis

Answer 13

default size of flex item before any growing or shrinking

Question 14

flex

Answer 14

flex-grow flex-shrink flex-basis
1 2 100px

Question 15

center an item

Answer 15

display: flex;
justify-content: center;
align-items: center;

Question 16

create a row of responsive items and/or cards using flexbox

Answer 16

.container styling{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.card {
flex: 1 1 100px;
}

@media (max-width: 600px) {
.card {
flex: 1 1 50px;
}
}