Loading... Login Loading... Register

CSS Flexbox vs Grid 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

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which CSS property is used to create a flex container?

Select your answer

display: grid;

display: flex;

grid-template-columns: 1fr 1fr;

flex-direction: row;

Question 2/15

What value of

flex-direction

will make a flex container display items vertically?

Select your answer

inline

vertical

row

column

Question 3/15

What does setting

flex-wrap: wrap;

do in flexbox?

Select your answer

It aligns items to the center of the container.

It allows items to move to the next line when needed.

It changes the direction of the flex items to row.

It makes the items grow to fill the space.

Question 4/15

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

Select your answer

grid-auto-flow: auto;

grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);

grid-template-areas: 'row col';

grid-column: 3 / 2;

Question 5/15

Which CSS declaration makes a grid item span multiple columns?

Select your answer

grid-column-span

grid-column-start / grid-column-end

column-span: all;

grid-column: span 2;

Question 6/15

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

Select your answer

align-content: start;

align-items: flex-start;

justify-content: start;

flex-wrap: wrap-start;

Question 7/15

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

Select your answer

flex-grow

flex-basis

flex-direction

flex-shrink

Question 8/15

If a flex item has

align-self: stretch;

, what will it do?

Select your answer

It will make the item expand and fill along the main axis.

It will align the item to the start of the container.

It will stack the item on top of similar items.

It will stretch the item to fill the container along the cross axis.

Question 9/15

If a flexbox container has

flex-flow: row wrap;

, what does this mean?

Select your answer

Items flow horizontally but cannot wrap onto new lines.

Items are constrained to a single row.

Items are displayed in rows and can wrap onto the next line as needed.

Items flow vertically and wrap as needed.

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

auto-fill

space-between

auto-space

grid-auto-flow: dense;

Question 12/15

What value of

justify-content

will evenly distribute flex items with equal space around them?

Select your answer

space-evenly

space-around

space-between

center

Question 13/15

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

Select your answer

row-gap

gap

column-gap

padding

Question 14/15

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

Select your answer

align-content: stretch;

align-items: center;

justify-items: stretch;

justify-content: center;

Question 15/15

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

Select your answer

justify-content

order

flex-grow

align-items

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

<pre><code>display: grid;</code></pre>

<pre><code>display: flex;</code></pre>

<pre><code>grid-template-columns: 1fr 1fr;</code></pre>

<pre><code>flex-direction: row;</code></pre>

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

<pre><code>inline</code></pre>

<pre><code>vertical</code></pre>

<pre><code>column</code></pre>

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

It aligns items to the center of the container.

It allows items to move to the next line when needed.

It changes the direction of the flex items to row.

It makes the items grow to fill the space.

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

<pre><code>grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);</code></pre>

<pre><code>grid-template-areas: 'row col';</code></pre>

<pre><code>grid-column: 3 / 2;</code></pre>

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

<pre><code>grid-column-span</code></pre>

<pre><code>grid-column-start / grid-column-end</code></pre>

<pre><code>column-span: all;</code></pre>

<pre><code>grid-column: span 2;</code></pre>

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

<pre><code>align-content: start;</code></pre>

<pre><code>align-items: flex-start;</code></pre>

<pre><code>justify-content: start;</code></pre>

<pre><code>flex-wrap: wrap-start;</code></pre>

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

<pre><code>flex-basis</code></pre>

<pre><code>flex-direction</code></pre>

<pre><code>flex-shrink</code></pre>

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

It will make the item expand and fill along the main axis.

It will align the item to the start of the container.

It will stack the item on top of similar items.

It will stretch the item to fill the container along the cross axis.

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

Items flow horizontally but cannot wrap onto new lines.

Items are constrained to a single row.

Items are displayed in rows and can wrap onto the next line as needed.

Items flow vertically and wrap as needed.

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

<pre><code>space-between</code></pre>

<pre><code>auto-space</code></pre>

<pre><code>grid-auto-flow: dense;</code></pre>

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

<pre><code>space-evenly</code></pre>

<pre><code>space-around</code></pre>

<pre><code>space-between</code></pre>

<pre><code>center</code></pre>

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

<pre><code>column-gap</code></pre>

<pre><code>padding</code></pre>

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

<pre><code>align-content: stretch;</code></pre>

<pre><code>align-items: center;</code></pre>

<pre><code>justify-items: stretch;</code></pre>

<pre><code>justify-content: center;</code></pre>

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

<pre><code>justify-content</code></pre>

<pre><code>order</code></pre>

<pre><code>align-items</code></pre>

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.