CSS Flexbox Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
Create an account and save your quiz results
Login and save your results
OR
Question 1/15
What is the purpose of
align-content: center;
in a flexbox layout?
Select your answer
Question 2/15
How would you create a responsive gallery of images in a single line using flexbox?
Select your answer
Question 3/15
What is the default flex-wrap value in a flex container?
Select your answer
Question 4/15
What does the
justify-content
property do in a flex container?
Select your answer
Question 5/15
What does the CSS property
display: flex;
do to an element?
Select your answer
Question 6/15
How can you reverse the order of flex items in a column direction?
Select your answer
Question 7/15
What CSS value is used by the
align-items
property to stretch flex items to fill the container on the cross axis?
Select your answer
Question 8/15
What is the effect of setting
flex-direction: column;
on a flex container?
Select your answer
Question 9/15
Which property of a flex container aligns the flex lines within when there is extra space on the cross axis?
Select your answer
Question 10/15
Which property allows you to specify the amount of space that flex items can grow relative to each other?
Select your answer
Question 11/15
What is the significance of using the
auto-fill
function in combination with CSS Grid but not with Flexbox?
Select your answer
Question 12/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 13/15
If two flex items have the same flex-grow value but different flex-shrink value, how are they affected when reducing the container's available space?
Select your answer
Question 14/15
How do you ensure flex items fill the entire height of their flex container?
Select your answer
Question 15/15
What is the result of using
flex-flow: column wrap-reverse;
on a flex container?
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
What is the purpose of <code>align-content: center;</code> in a flexbox layout?
Available answers
The
align-content: center;
property vertically centers flex lines inside the container if there is extra space in the cross axis.
Question 2/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 3/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 4/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 5/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 6/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 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What CSS value is used by the <code>align-items</code> property to stretch flex items to fill the container on the cross axis?
Available answers
The value
stretch
for the align-items
property stretches the flex items to fill the container on the cross axis.
Question 8/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 9/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.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which property allows you to specify the amount of space that flex items can grow relative to each other?
Available answers
The
flex-grow
property determines how much a flex item will grow relative to the rest of the flex items when there is extra space in the container.
Question 11/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 12/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 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If two flex items have the same flex-grow value but different flex-shrink value, how are they affected when reducing the container's available space?
Available answers
When reducing space, flex items with identical
flex-grow
and different flex-shrink
values will shrink at different rates, prioritizing the item with the larger shrink factor to decrease first.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you ensure flex items fill the entire height of their flex container?
Available answers
By setting
align-items: stretch;
, the flex items will expand to take up the full height (or length) of their container along the cross axis.
Question 15/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.