Loading... Login Loading... Register

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

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

How do you hide an element yet maintain its space in a flex container?

Select your answer

Set display: none; on the element.

Apply opacity: 0;

Use position: absolute; to move it off-screen.

Use visibility: hidden;

Question 2/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

Neither item shrinks at all, due to equal flex-grow values.

Both items shrink evenly without considering the flex-shrink values.

The item with the higher flex-grow value expands further with less space.

Both items will shrink, but the one with a higher flex-shrink value shrinks more.

Question 3/15

What is the effect of setting flex-direction: column; on a flex container?

Select your answer

The flex items are laid out vertically, one below the other.

The flex container turns into a grid container.

All flex items are placed in a single line.

Flex items are stacked in the reverse order.

Question 4/15

What is a benefit of using CSS Flexbox for layout compared to CSS Grid Layout?

Select your answer

Flexbox is well-suited for simple, one-dimensional layouts.

Flexbox offers better performance for large, complex grids than Grid.

Flexbox supports media queries directly within properties.

Flexbox allows for nested layout structures without limits.

Question 5/15

Which property on a flex item allows it to be individually aligned on the cross axis overriding the container's align-items value?

Select your answer

flex-direction

align-self

order

justify-self

Question 6/15

What CSS value is used by the align-items property to stretch flex items to fill the container on the cross axis?

Select your answer

flex-start

center

stretch

flex-end

Question 7/15

Which CSS property defines the main axis of a flex container?

Select your answer

flex-direction

flex-wrap

align-items

justify-content

Question 8/15

Which property allows you to specify the amount of space that flex items can grow relative to each other?

Select your answer

align-self

flex-basis

flex-grow

flex-shrink

Question 9/15

How can you reverse the order of flex items in a column direction?

Select your answer

Use align-items: flex-end;

Set flex-wrap: reverse;

Apply order: -1; to each item

Use flex-direction: column-reverse;

Question 10/15

What is the effect of flex: auto; on a flex item?

Select your answer

The item is fixed in place and cannot expand, but can shrink.

The item floats to the left within the container.

It makes the item disappear from the layout.

The item expands and overcomes any available space, but also shrinks when necessary.

Question 11/15

How do you center a flex item horizontally and vertically within a flex container?

Select your answer

Use justify-content: center; and align-items: center; on the flex container.

Use position: absolute; with top: 50%; and left: 50%;.

Add margin: auto; to the flex item.

Use text-align: center; on the flex item.

Question 12/15

What is the purpose of align-content: center; in a flexbox layout?

Select your answer

Aligns each individual flex item to the center.

Centers all flex items on the main axis in the middle.

Centers multiple lines of flex items within the container on the cross axis.

Aligns content with text alignment properties.

Question 13/15

What is the significance of using the auto-fill function in combination with CSS Grid but not with Flexbox?

Select your answer

The auto-fill function is specific to CSS Grid and automatically fills columns or rows with as many items that can fit based on a given size; flexbox doesn't provide this capability inherently.

The auto-fill function adds extra gaps between flex items without altering their growth behavior.

It allows Flexbox to support table-like layouts directly through CSS, which Grid does not support.

The auto-fill function rearanges flex items into the optimal configuration regardless of the starting order.

Question 14/15

Which CSS property is used to specify whether the flex items are forced into a single line or can be wrapped onto multiple lines?

Select your answer

order

align-content

flex-wrap

flex-basis

Question 15/15

Which statement is true regarding the flex shorthand property?

Select your answer

It sets flex-grow, flex-shrink, and flex-basis in one declaration.

It can be used to strictly set the width of a flex item.

It only sets the flex-direction and align-items properties.

It's a property only meant for flex containers, not items.

Your Results

You did not answer any questions correctly.

CSS Flexbox Quiz

Create an account and save your quiz results

Login and save your results

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Your Results

Your Answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers