CSS Flexbox vs Grid Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

Which CSS property is used to create a flex container?

Select your answer

Question 2/15

What value of
flex-direction
will make a flex container display items vertically?

Select your answer

Question 3/15

What does setting
flex-wrap: wrap;
do in flexbox?

Select your answer

Question 4/15

To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?

Select your answer

Question 5/15

Which CSS declaration makes a grid item span multiple columns?

Select your answer

Question 6/15

In flexbox, which property aligns items to the start of the cross axis?

Select your answer

Question 7/15

Which flex property defines the initial main size of a flex item?

Select your answer

Question 8/15

If a flex item has
align-self: stretch;
, what will it do?

Select your answer

Question 9/15

If a flexbox container has
flex-flow: row wrap;
, what does this mean?

Select your answer

Question 10/15

Which unit is typically used in CSS Grid for flexible lengths?

Select your answer

Question 11/15

What property will make a grid item automatically fill the empty spaces in a grid container?

Select your answer

Question 12/15

What value of
justify-content
will evenly distribute flex items with equal space around them?

Select your answer

Question 13/15

Which property is NOT used to control the spaces between rows and columns in a CSS Grid?

Select your answer

Question 14/15

How do you set the default alignment of items along the cross axis in a flex container?

Select your answer

Question 15/15

How do you make a flex item occupy more space than others in the same row?

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
Which CSS property is used to create a flex container?

Available answers

The property
display: flex;
is used to define a flex container, enabling the use of all the flex properties on its children.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
What value of <pre><code>flex-direction</code></pre> will make a flex container display items vertically?

Available answers

The
flex-direction: column;
property makes the flex container display its items in a vertical flow.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does setting <pre><code>flex-wrap: wrap;</code></pre> do in flexbox?

Available answers

Setting
flex-wrap: wrap;
allows flex items to wrap onto multiple lines as needed, rather than fitting into a single line.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
To create an equally-spaced grid layout with 2 rows and 3 columns, which grid property is essential?

Available answers

To define a layout with 2 rows and 3 columns of equal size, use
grid-template-rows
and
grid-template-columns
with fractional units like
grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which CSS declaration makes a grid item span multiple columns?

Available answers

The
grid-column: span 2;
declaration is used to make a grid item span two columns.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
In flexbox, which property aligns items to the start of the cross axis?

Available answers

The
align-items: flex-start;
property aligns flex items to the start of the cross axis.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which flex property defines the initial main size of a flex item?

Available answers

The
flex-basis
property defines the initial main size of a flex item, before any space distribution occurs.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
If a flex item has <pre><code>align-self: stretch;</code></pre>, what will it do?

Available answers

align-self: stretch;
makes a flex item stretch to fill the container along the cross axis.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
If a flexbox container has <pre><code>flex-flow: row wrap;</code></pre>, what does this mean?

Available answers

flex-flow: row wrap;
means items are laid out in a row and can wrap onto new lines if needed.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which unit is typically used in CSS Grid for flexible lengths?

Available answers

The
fr
unit represents a fraction of the available space in a grid container, making it excellent for flexible layout design.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
What property will make a grid item automatically fill the empty spaces in a grid container?

Available answers

grid-auto-flow: dense;
makes grid items fill empty spaces in a grid, thus allowing items to out of order and fill in gaps.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
What value of <pre><code>justify-content</code></pre> will evenly distribute flex items with equal space around them?

Available answers

justify-content: space-around;
will evenly distribute flex items with equal space around each item.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property is NOT used to control the spaces between rows and columns in a CSS Grid?

Available answers

padding
applies space inside an element's border, not specifically between rows and columns in a grid. For grids, you'd use
gap
,
row-gap
, or
column-gap
.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you set the default alignment of items along the cross axis in a flex container?

Available answers

The default alignment of items along the cross axis in a flex container is controlled by
align-items
, and centering them would be
align-items: center;
.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you make a flex item occupy more space than others in the same row?

Available answers

The
flex-grow
property is used to specify how much a flex item will grow relative to the rest of the flex items in the same container.