CSS Flexbox Layout Quiz

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.