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
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 2/15
When using
flex-direction: row-reverse;
, how does the order of flex items change in the DOM?
Select your answer
Question 3/15
What is the result of using
flex-flow: column wrap-reverse;
on a flex container?
Select your answer
Question 4/15
Which CSS property defines the main axis of a flex container?
Select your answer
Question 5/15
How do you center a flex item horizontally and vertically within a flex container?
Select your answer
Question 6/15
How would you create a responsive gallery of images in a single line using flexbox?
Select your answer
Question 7/15
What CSS property defines the initial size of a flex item before space distribution?
Select your answer
Question 8/15
How do you hide an element yet maintain its space in a flex container?
Select your answer
Question 9/15
What is a benefit of using CSS Flexbox for layout compared to CSS Grid Layout?
Select your answer
Question 10/15
How does setting
flex-basis: 0;
affect flex item layout?
Select your answer
Question 11/15
Which value of the
justify-content
property evenly distributes the flex items with spaces between them?
Select your answer
Question 12/15
Which statement is true regarding the
flex
shorthand property?
Select your answer
Question 13/15
How can you reverse the order of flex items in a column direction?
Select your answer
Question 14/15
What does the CSS property
display: flex;
do to an element?
Select your answer
Question 15/15
What is the effect of setting
flex-direction: column;
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
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 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
When using <code>flex-direction: row-reverse;</code>, how does the order of flex items change in the DOM?
Available answers
When you use
flex-direction: row-reverse;
, the visual order of items is reversed, but the DOM order remains unchanged, which affects accessibility and tabbing order.
Question 3/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 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which CSS property defines the main axis of a flex container?
Available answers
The
flex-direction
property in CSS defines the direction the flex items are placed in the flex container, which is known as the main axis.
Question 5/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 6/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 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What CSS property defines the initial size of a flex item before space distribution?
Available answers
The
flex-basis
property sets the initial size of a flex item before the remaining space is distributed according to the flex-grow and flex-shrink properties.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you hide an element yet maintain its space in a flex container?
Available answers
Using
visibility: hidden;
will hide the element visually but still keep its occupied space allotted in the layout.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is a benefit of using CSS Flexbox for layout compared to CSS Grid Layout?
Available answers
CSS Flexbox is advantageous for simple, one-dimensional layouts, making it easier to align items in a single line or column, whereas Grid is better for complex, two-dimensional layouts.
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
Which value of the <code>justify-content</code> property evenly distributes the flex items with spaces between them?
Available answers
The
justify-content: space-between;
value places the flex items evenly with equal spaces between them, but no space at the start or end of the container.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which statement is true regarding the <code>flex</code> shorthand property?
Available answers
The
flex
shorthand property allows you to set flex-grow
, flex-shrink
, and flex-basis
in a single line for a flex item.
Question 13/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 14/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 15/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.