Flexbox

Question 1

make .row a flex container

Answer 1

.row {
display: flex;
}

Question 2

make .row container a multi-line flex container

Answer 2

.row {
display: flex;
flex-wrap: wrap;
}

Question 3

Give .row the flexbox property and value that will place the first and last items along its edges, then equally distribute the space between the other items.

Answer 3

.row {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

Question 4

Select the class .column and use the flex item property and value that will expand the columns to fill the space of the row.

Answer 4

.column {
flex-grow: 1;
}

Question 5

target .primary and give it twice as much space as the other flex items.

Answer 5

.primary {
flex-grow: 2;
}

Question 6

align the columns to the vertical center of .row

Answer 6

.row {
align-items: center;
}

Question 7

make .row and inline-flex container

Answer 7

.row {
display: inline-flex;
}

Question 8

change flex-direction of .container to column

Answer 8

.container {
display: flex;
flex-direction: column;
}

Question 9

reverse the order of .nav items

Answer 9

.nav {
display: flex;
flex-direction: reverse-row;
}

Question 10

create a multi-column .container with a limited height of 280px

Answer 10

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 280px;
}

Question 11

aligns the .container content to the left

Answer 11

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end; 
}

Question 12

spreads out items of the container evenly, including the ones close to the edge of the container)

Answer 12

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

Question 13

left justifies .item-1 and right justifies all other items

Answer 13

.item-1 {
margin-right: auto;
}

Question 14

place .item-6 in front of .item-1

Answer 14

.item-6 {
order: -1;
}