CSS Flexbox Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

How can you reverse the order of flex items in a column direction?

Select your answer

Question 2/15

Which property on a flex item allows it to be individually aligned on the cross axis overriding the container's align-items value?

Select your answer

Question 3/15

How do you center a flex item horizontally and vertically within a flex container?

Select your answer

Question 4/15

What is the significance of using the auto-fill function in combination with CSS Grid but not with Flexbox?

Select your answer

Question 5/15

What is the effect of flex: auto; on a flex item?

Select your answer

Question 6/15

What is the default flex-wrap value in a flex container?

Select your answer

Question 7/15

What is the effect of setting flex-direction: column; on a flex container?

Select your answer

Question 8/15

What is the result of using flex-flow: column wrap-reverse; on a flex container?

Select your answer

Question 9/15

What does the justify-content property do in a flex container?

Select your answer

Question 10/15

How does setting flex-basis: 0; affect flex item layout?

Select your answer

Question 11/15

What does the CSS property display: flex; do to an element?

Select your answer

Question 12/15

Which property is used to change the order of a flex item?

Select your answer

Question 13/15

How would you create a responsive gallery of images in a single line using flexbox?

Select your answer

Question 14/15

What is the default value of the flex-direction property?

Select your answer

Question 15/15

Which property of a flex container aligns the flex lines within when there is extra space on the cross axis?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you reverse the order of flex items in a column direction?

Available answers

Setting flex-direction: column-reverse; on a flex container reverses the order of items in a vertical column.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property on a flex item allows it to be individually aligned on the cross axis overriding the container's align-items value?

Available answers

The align-self property allows a flex item to override the flex container's align-items value, letting it be aligned individually on the cross axis.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you center a flex item horizontally and vertically within a flex container?

Available answers

To center a flex item horizontally and vertically within a flex container, you use justify-content: center; and align-items: center; on the flex container.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the significance of using the <code>auto-fill</code> function in combination with CSS Grid but not with Flexbox?

Available answers

While the auto-fill function helps automatically adjust the number of columns/rows based on available space in CSS Grid, Flexbox operates independently without such a function.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the effect of <code>flex: auto;</code> on a flex item?

Available answers

The flex: auto; shorthand is a combination of flex: 1 1 auto; meaning the item will take up available space but will also shrink when limited space is available.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the default flex-wrap value in a flex container?

Available answers

The default value for flex-wrap is nowrap, which means the flex items will be on a single line by default.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the effect of setting <code>flex-direction: column;</code> on a flex container?

Available answers

By setting flex-direction: column;, you layout the flex items vertically in a column direction within the flex container.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the result of using <code>flex-flow: column wrap-reverse;</code> on a flex container?

Available answers

The flex-flow: column wrap-reverse; layout arranges flex items in a column format and allows them to wrap in rows opposite to the counter direction.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does the <code>justify-content</code> property do in a flex container?

Available answers

The justify-content property aligns the flex items along the main axis, allowing you to space them out along that axis.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
How does setting <code>flex-basis: 0;</code> affect flex item layout?

Available answers

With flex-basis: 0;, the flex items size as equally distributed parts of the available space, depending heavily on flex-grow and flex-shrink values.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does the CSS property <code>display: flex;</code> do to an element?

Available answers

The CSS property display: flex; changes an element's layout model to flexbox, enabling its children to be laid out in a flexible, responsive manner.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property is used to change the order of a flex item?

Available answers

The order property is used to change the order of flex items in a flex container without rearranging them in the HTML.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you create a responsive gallery of images in a single line using flexbox?

Available answers

To create a responsive gallery that wraps flex items, use display: flex; on the container and flex-wrap: wrap;. This way, the items will wrap into lines when needed.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the default value of the <code>flex-direction</code> property?

Available answers

The default value for the flex-direction property is row, which lays out the flex items in the direction of a row (horizontally).
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property of a flex container aligns the flex lines within when there is extra space on the cross axis?

Available answers

The align-content property is used to align the flex lines (e.g., when items wrap) within the flex container, distributing any extra space on the cross-axis.