CSS Flexbox Layout 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/10
When using
flex-direction: column;
, which property affects how flex items are aligned along the cross-axis?
Select your answer
Question 2/10
In Flexbox, which property is used to change the order of the flex items independently regardless of their source order in the DOM?
Select your answer
Question 3/10
What is the default value of the CSS property
flex-direction
?
Select your answer
Question 4/10
How does setting
align-self
differ from align-items
in Flexbox?
Select your answer
Question 5/10
Consider the following CSS code:
display: flex; flex-direction: row-reverse; justify-content: center;
. Where will the items be positioned if there is extra space?
Select your answer
Question 6/10
What is the effect of setting
flex-wrap: wrap;
on a flex container with a single row of items?
Select your answer
Question 7/10
Which property controls the distribution of space between and around content items along the main-axis of a flex container?
Select your answer
Question 8/10
What does the
flex-basis
property specify in a flex item?
Select your answer
Question 9/10
Which flex property allows child elements to grow at different rates according to their
flex-grow
values?
Select your answer
Question 10/10
When combining
justify-content: flex-start;
and flex-direction: row-reverse;
, where are items aligned?
Select your answer
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
When using <pre><code>flex-direction: column;</code></pre>, which property affects how flex items are aligned along the cross-axis?
Available answers
For
flex-direction: column;
, the cross-axis is horizontal. Therefore, align-items
controls the alignment of flex items along this axis.
Question 2/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
In Flexbox, which property is used to change the order of the flex items independently regardless of their source order in the DOM?
Available answers
The
order
property in Flexbox sets the order in which flex items are laid out in the flex container, overriding the natural DOM order.
Question 3/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the default value of the CSS property <pre><code>flex-direction</code></pre>?
Available answers
In CSS Flexbox, the default value for
flex-direction
is row
, which arranges flex items horizontally from left to right.
Question 4/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
How does setting <pre><code>align-self</code></pre> differ from <pre><code>align-items</code></pre> in Flexbox?
Available answers
The
align-self
property allows specific items to override the align-items
value set on their container.
Question 5/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
Consider the following CSS code: <pre><code>display: flex; flex-direction: row-reverse; justify-content: center;</code></pre>. Where will the items be positioned if there is extra space?
Available answers
With
flex-direction: row-reverse;
, the main start is on the right, and by using justify-content: center;
, items are centered from the reversed start, thus aligning towards the right.
Question 6/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the effect of setting <pre><code>flex-wrap: wrap;</code></pre> on a flex container with a single row of items?
Available answers
flex-wrap: wrap;
allows flex items to break into multiple rows, wrapping according to the available container space.
Question 7/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which property controls the distribution of space between and around content items along the main-axis of a flex container?
Available answers
The
justify-content
property aligns items along the main-axis, controlling how extra space is distributed between flex items.
Question 8/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the <pre><code>flex-basis</code></pre> property specify in a flex item?
Available answers
The
flex-basis
property specifies the initial main size of a flex item before the space distribution according to flex-grow and flex-shrink.
Question 9/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which flex property allows child elements to grow at different rates according to their <pre><code>flex-grow</code></pre> values?
Available answers
The
flex-grow
property specifies the ability for a flex item to grow if necessary. The higher the value, the more space an item will take relative to others.
Question 10/10
😊 Your
answer was correct
🙁 Your
answer was incorrect
When combining <pre><code>justify-content: flex-start;</code></pre> and <pre><code>flex-direction: row-reverse;</code></pre>, where are items aligned?
Available answers
With
flex-direction: row-reverse;
, the main start is on the right, so justify-content: flex-start;
aligns items starting from the right.