feat(curriculum): Add set 2 of questions for CSS Flexbox quiz (#61067)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md

@@ -514,3 +514,558 @@ Dynamically adjusting distribution and alignment of items for different viewport
 
 Fixed sizing and space between items like a grid.
 
+## --quiz--
+
+### --question--
+
+#### --text--
+
+What is the purpose of a one-dimensional layout model like Flexbox?
+
+#### --distractors--
+
+To handle layout in two dimensions, both rows and columns at the same time.
+
+---
+
+To control the stacking order of positioned elements using `z-index`.
+
+---
+
+To create 3D transforms and complex animations on page elements.
+
+#### --answer--
+
+To lay out items along a single line or axis, either as a row or as a column.
+
+### --question--
+
+#### --text--
+
+Which CSS property will align all the flex items to the right side of the `.container` element?
+
+```css
+.container {
+  display: flex;
+  flex-direction: row;
+}
+```
+
+#### --distractors--
+
+`justify-content: flex-start;`
+
+---
+
+`justify-content: space-between;`
+
+---
+
+`align-items: flex-end;`
+
+#### --answer--
+
+`justify-content: flex-end;`
+
+### --question--
+
+#### --text--
+
+What are the two axes that define the direction of item layout in the Flex Model?
+
+#### --distractors--
+
+The horizontal axis and the vertical axis.
+
+---
+
+The x-axis and the y-axis.
+
+---
+
+The primary axis and the secondary axis.
+
+#### --answer--
+
+The main axis and the cross axis.
+
+### --question--
+
+#### --text--
+
+Which of the following CSS rules will arrange items in a vertical column and also center them horizontally within their container?
+
+#### --distractors--
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+```
+
+#### --answer--
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+```
+
+### --question--
+
+#### --text--
+
+What is the main purpose of the `flex-wrap` property?
+
+#### --distractors--
+
+It sets the direction that flex items are placed in the flex container.
+
+---
+
+It aligns flex items along the main axis of the container.
+
+---
+
+It aligns flex items along the cross axis of the container.
+
+#### --answer--
+
+It determines if flex items should wrap onto new lines to fit available space.
+
+### --question--
+
+#### --text--
+
+What is the default behavior of the `flex-wrap: nowrap;` declaration?
+
+#### --distractors--
+
+It forces flex items to wrap onto a new line if they are too wide for the container.
+
+---
+
+It wraps items onto a new line, but in the reverse order.
+
+---
+
+It prevents the flex container from being larger than its parent element.
+
+#### --answer--
+
+It forces flex items to remain on a single line, even if they overflow the container.
+
+### --question--
+
+#### --text--
+
+Which CSS property is a shorthand for setting both the `flex-direction` and `flex-wrap` properties at once?
+
+#### --distractors--
+
+`flex-box`
+
+---
+
+`flex-align`
+
+---
+
+`flex-container`
+
+#### --answer--
+
+`flex-flow`
+
+### --question--
+
+#### --text--
+
+What is the effect of setting `flex-direction: column-reverse;` on a flex container?
+
+#### --distractors--
+
+It arranges items horizontally from right to left.
+
+---
+
+It reverses the items in a row, but keeps them on a single line.
+
+---
+
+It arranges items vertically from top to bottom.
+
+#### --answer--
+
+It arranges items vertically in a reverse order from bottom to top.
+
+### --question--
+
+#### --text--
+
+Which CSS snippet correctly arranges flex items in a vertical column and allows them to wrap onto a new column if they overflow the container's height?
+
+#### --distractors--
+
+```css
+.container {
+  display: flex;
+  flex-flow: row wrap;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+#### --answer--
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which `justify-content` value aligns all flex items to the end of the container's main axis?
+
+#### --distractors--
+
+`justify-content: end;`
+
+---
+
+`justify-content: center;`
+
+---
+
+`justify-content: flex-start;`
+
+#### --answer--
+
+`justify-content: flex-end;`
+
+### --question--
+
+#### --text--
+
+What is the effect of the following CSS rule on flex items?
+
+```css
+.container {
+  flex-flow: row nowrap;
+}
+```
+
+#### --distractors--
+
+Items are arranged in a column and will wrap to a new column.
+
+---
+
+Items are arranged in a row and will wrap to a new row.
+
+---
+
+Items are arranged in a column and will overflow if they don't fit.
+
+#### --answer--
+
+Items are arranged in a row and will overflow the container if they don't fit.
+
+### --question--
+
+#### --text--
+
+How does `justify-content: space-evenly;` align flex items?
+
+```css
+.container {
+  display: flex;
+  justify-content: space-evenly;
+}
+```
+
+#### --distractors--
+
+Items are evenly spaced, with no space at the start or end.
+
+---
+
+Items are packed together in the center of the container.
+
+---
+
+Items are pushed to the right side of the container, with equal spacing between them.
+
+#### --answer--
+
+Items have equal space between them and at both ends of the container.
+
+### --question--
+
+#### --text--
+
+Which property would you use to vertically center items when `flex-direction: row;` is set?
+
+#### --distractors--
+
+`justify-content: center;`
+
+---
+
+`vertical-align: middle;`
+
+---
+
+`text-align: center;`
+
+#### --answer--
+
+`align-items: center;`
+
+### --question--
+
+#### --text--
+
+What does the `flex-start` value for the `justify-content` property do?
+
+#### --distractors--
+
+It aligns items to the start of the cross axis.
+
+---
+
+It stretches items to fill the container's main axis.
+
+---
+
+It centers all the items along the main axis.
+
+#### --answer--
+
+It aligns items to the beginning of the container's main axis.
+
+### --question--
+
+#### --text--
+
+How would you set up a flex container to arrange its items from right-to-left on a single line, and also position them at the top of the container?
+
+#### --distractors--
+
+```css
+.container {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  align-items: flex-start;
+}
+```
+
+#### --answer--
+
+```css
+.container {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which of the following is a valid declaration for the `flex-flow` property?
+
+#### --distractors--
+
+`flex-flow: center wrap;`
+
+---
+
+`flex-flow: row space-between;`
+
+---
+
+`flex-flow: column reverse;`
+
+#### --answer--
+
+`flex-flow: column wrap-reverse;`
+
+### --question--
+
+#### --text--
+
+Which of the following CSS rules will result in flex items being centered horizontally and stretched vertically to fill the height of the container?
+
+#### --distractors--
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+}
+```
+
+---
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+```
+
+#### --answer--
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+```
+
+### --question--
+
+#### --text--
+
+What effect does `align-items: stretch;` have when `flex-direction` is set to `column`?
+
+#### --distractors--
+
+It stretches items vertically to fill the container's height.
+
+---
+
+It has no effect when the direction is `column`.
+
+---
+
+It stretches items vertically to match the tallest item.
+
+#### --answer--
+
+It stretches items horizontally to fill the container's width.
+
+### --question--
+
+#### --text--
+
+If you want to reverse the order of items in a horizontal row, which declaration should you use?
+
+#### --distractors--
+
+`flex-direction: column-reverse;`
+
+---
+
+`flex-wrap: wrap-reverse;`
+
+---
+
+`flex-direction: reverse-row;`
+
+#### --answer--
+
+`flex-direction: row-reverse;`
+
+### --question--
+
+#### --text--
+
+Which value of `align-items` will position items at the top of a container whose `flex-direction` is `row`?
+
+#### --distractors--
+
+`align-items: top;`
+
+---
+
+`justify-content: flex-start;`
+
+---
+
+`align-items: stretch;`
+
+#### --answer--
+
+`align-items: flex-start;`