curriculum/challenges/english/blocks/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What is flexbox?
A two-dimensional model for layout.
A three-dimensional model for layout.
A multi-dimensional model for layout.
A one-dimensional model for layout.
What CSS property is set to enable the flexbox layout for the div element?
div {
flex: 1;
}
div {
flex-direction: row;
}
div {
flex-wrap: wrap;
}
div {
display: flex;
}
Which CSS property lets flex items wrap onto a new row when the current row is full?
flex-direction
justify-content
align-items
flex-wrap
What does the flexbox property justify-content control?
It controls the direction of the child elements of the flexbox container.
It controls the text style of the child elements of the flexbox container.
It controls the alignment of the child elements within the flexbox container.
It controls the distribution of the child elements on the main axis.
What property controls the direction of the elements within the flexbox container?
flex-wrap
flex
justify-content
flex-direction
Which CSS properties can be used to make flex items flow from left to right, and have the new flex item appear on top of the previous one if the width of the current row is exceeded?
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
What property controls the positioning of the elements on the cross axis?
flex-wrap
flex-direction
justify-content
align-items
Which is not a value for justify-content?
flex-start
center
space-between
row
What CSS properties would you use to center an element within a flex container horizontally, and vertically?
.container {
display: flex;
justify-content: center;
}
.container {
display: flex;
align-items: center;
}
.container {
display: flex;
align-content: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
What value of flex-direction makes the flex items go from right to left?
column-reverse
column
row
row-reverse
What is not a value of the flex-wrap property?
nowrap
wrap
wrap-reverse
row
What does the stretch value in align-items do?
Items are packed directly against each other toward the start edge of the container.
Items are aligned such that their flex container baselines align.
Items are packed directly against each other toward the end edge of the container.
Auto-size items to be equally large to fill the container.
Which justify-content value places the first item at the start, the last item at the end, and evenly spaces the other items between them along the main axis?
space-evenly
space-around
center
space-between
Which justify-content value spaces items so that the gaps between every pair of adjacent items and the container’s edges are all equal?
space-between
space-around
center
space-evenly
Which justify-content value spaces items equally along the main axis while leaving half that amount of space at the container’s edges?
space-evenly
center
space-between
space-around
Which of the following results in the items being aligned at the start of the cross axis?
align-items: flex-starts;
align-items: baseline;
align-items: first-baseline;
align-items: flex-start;
Which of the following results in the items being aligned at the end of the cross axis?
align-items: flex-ends;
align-items: end;
align-items: flex-ending;
align-items: flex-end;
Which value for flex-direction will make it so items are aligned along the main axis from left to right?
column
column-reverse
row-reverse
row
Which value for flex-direction will make it so items are aligned along the cross axis from top to bottom?
row
column-reverse
row-reverse
column
Which of the following use case is not suitable for flexbox?
Centering an item in a container.
Vertical alignment of items in a row.
Dynamically adjusting distribution and alignment of items for different viewports.
Fixed sizing and space between items like a grid.
What is the purpose of a one-dimensional layout model like Flexbox?
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.
To lay out items along a single line or axis, either as a row or as a column.
Which CSS property will align all the flex items to the right side of the .container element?
.container {
display: flex;
flex-direction: row;
}
justify-content: flex-start;
justify-content: space-between;
align-items: flex-end;
justify-content: flex-end;
What are the two axes that define the direction of item layout in the Flex Model?
The horizontal axis and the vertical axis.
The x-axis and the y-axis.
The primary axis and the secondary axis.
The main axis and the cross axis.
Which of the following CSS rules will arrange items in a vertical column and also center them horizontally within their container?
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
What is the main purpose of the flex-wrap property?
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.
It determines if flex items should wrap onto new lines to fit available space.
What is the default behavior of the flex-wrap: nowrap; declaration?
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.
It forces flex items to remain on a single line, even if they overflow the container.
Which CSS property is a shorthand for setting both the flex-direction and flex-wrap properties at once?
flex-box
flex-align
flex-container
flex-flow
What is the effect of setting flex-direction: column-reverse; on a flex container?
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.
It arranges items vertically in a reverse order from bottom to top.
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?
.container {
display: flex;
flex-flow: row wrap;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-flow: column wrap;
}
Which justify-content value aligns all flex items to the end of the container's main axis?
justify-content: end;
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
What is the effect of the following CSS rule on flex items?
.container {
flex-flow: row nowrap;
}
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.
Items are arranged in a row and will overflow the container if they don't fit.
How does justify-content: space-evenly; align flex items?
.container {
display: flex;
justify-content: space-evenly;
}
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.
Items have equal space between them and at both ends of the container.
Which property would you use to vertically center items when flex-direction: row; is set?
justify-content: center;
vertical-align: middle;
text-align: center;
align-items: center;
What does the flex-start value for the justify-content property do?
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.
It aligns items to the beginning of the container's main axis.
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?
.container {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.container {
display: flex;
flex-wrap: wrap-reverse;
align-items: flex-start;
}
.container {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
Which of the following is a valid declaration for the flex-flow property?
flex-flow: center wrap;
flex-flow: row space-between;
flex-flow: column reverse;
flex-flow: column wrap-reverse;
Which of the following CSS rules will result in flex items being centered horizontally and stretched vertically to fill the height of the container?
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: stretch;
align-items: center;
}
.container {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.container {
display: flex;
justify-content: center;
align-items: stretch;
}
What effect does align-items: stretch; have when flex-direction is set to column?
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.
It stretches items horizontally to fill the container's width.
If you want to reverse the order of items in a horizontal row, which declaration should you use?
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
flex-direction: reverse-row;
flex-direction: row-reverse;
Which value of align-items will position items at the top of a container whose flex-direction is row?
align-items: top;
justify-content: flex-start;
align-items: stretch;
align-items: flex-start;