HOTSPOT
You are developing a web page.
The webpage must display a container. The container must display three colored rectangles
near the top of the container. The colored rectangles are, in order, green, red, and yellow.
The rectangles are aligned horizontally and evenly spaced across the width of the container.
The layout of the page must resemble the following image:
You need to ensure that the page renders properly.
How should you complete the relevant styles? (To answer, select the appropriate option
from each drop-down list in the answer area.)
Answer: 
Explanation:
Should be -ms-flex-align:start
+1 should be start, center aligns them horizontally i.e. they would be in the middle of the box not at the top. Start aligns them at the start, naturally.
https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx
-ms-flex-align: start;
//start moves it to top of page. start, end, center, stretch, baseline
-ms-flex-pack: justify; //splits the boxes out evenly across the page
.box
{
display: -ms-flexbox;
-ms-flex-direction: row;
-ms-flex-align: start;
-ms-flex-pack: justify;
width: 550px;
height: 400px;
border: solid 1px black;
padding: 10px;
}
.rect { width: 100px; height: 100px; border: solid 1px black;}
Thank you Will. Your answer is right.
agree with will
result can be checked here http://the-echoplex.net/flexyboxes/
Explanation
Explanation/Reference:
* -ms-flex-align
center: The flexbox item’s margin box is centered in the cross axis within the line.
* -ms-flex-pack
The ‘flex-pack’ property defines the flexibility of these packing spaces.
Reference: CSS property ‘-ms-flex-align’; CSS property ‘-ms-flex-pack’