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: 
The answer for -ms-flex-pack should be “justify”
None of the proposed answers is correct.
According to this article:
https://msdn.microsoft.com/library/hh673531(v=vs.85).aspx
the correct answers should be:
-ms-flex-align:start;
-ms-flex-pack:justify;
I don’t think justify is correct. Justify forces the outer boxes to the edge of the page. At your link it says under justify, “The starting edge of the first child element is placed at the start of the parent element. The ending edge of the last child element is placed edge-to-edge with the end of the parent box.”
The image does not show this. stretch would spread the boxes away from each other as shown in the image here.
I think you are right!
The available choices seem incomplete. Logic would indicate the “easy” answer would be as follows:
-ms-flex-align: stretch;
-ms-flex-pack: distribute;
However, “distribute” is not a choice.
Note: “stretch” is not a valid value for the -ms-flex-pack property, so that choice is 100% incorrect. Valid values for -ms-flex-pack are center, distribute, end, justify and start. Valid values for -ms-flex-align are baseline, center, end, start and stretch.
The only way I was able to get the desired result was to apply styles to the three internal boxes (adding left and right margin to the red box as well as a top margin to all three boxes. Since the .box class (which is obviously applied to the large gray container) is the only area of focus for this question, I assumed that what styles one applies to the other elements is completely open. The choices that allowed me to get the desired result are:
-ms-flex-align: stretch;
-ms-flex-pack: center;
From among the choices it seems to me below answer is more logical
-ms-flex-align: stretch;
-ms-flex-pack: center;
these properties worked in IE10. for IE11 everything has changed.
IE11 discards flex-align and flex-pack and introduces justify-content instead.
how to deal with these changes when preparing for the exam? is this question now irrelevant? should we learn about the new properties for IE11?
Correct Answer is
-ms-flex-align: stretch;
-ms-flex-pack: center;
https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx
I tested the result should be as follows:
-ms-flex-align: center;
-ms-flex-pack:distribute ;
Anyone got a response for @stijn? This answer is irrelevant and unsupported now. Do we still have to learn this old deprecated model?