Tailwind CSS Flexbox and Grid Layout Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

Which Tailwind CSS class is used to create an inline flex container?

Select your answer

Question 2/15

In Tailwind CSS, how do you set an element to not wrap flex items?

Select your answer

Question 3/15

Which Tailwind CSS utility class would you use to distribute flex items equally on the main axis?

Select your answer

Question 4/15

What Tailwind CSS utility would you use to align items to the center in a flex container?

Select your answer

Question 5/15

Which of the following classes can be used to align flex items to the start of the cross axis?

Select your answer

Question 6/15

What effect does 'justify-self-end' have on a grid item in Tailwind CSS?

Select your answer

Question 7/15

In Tailwind CSS, which class will set the grid layout to two columns?

Select your answer

Question 8/15

Which Tailwind CSS utility class sets a grid container to a default gap between rows and no gap between columns?

Select your answer

Question 9/15

In Tailwind CSS, what does the 'grid-flow-col' utility class do?

Select your answer

Question 10/15

How can you reverse the order of grid items in Tailwind CSS?

Select your answer

Question 11/15

Which Tailwind CSS class would you use to equally distribute space between all flex items on the main axis?

Select your answer

Question 12/15

In Tailwind CSS, what does the utility 'auto-rows-auto' achieve?

Select your answer

Question 13/15

How do you apply a flexbox layout to an element using Tailwind CSS?

Select your answer

Question 14/15

How would you lay out flex items as rows reversing their order in Tailwind CSS?

Select your answer

Question 15/15

What is the effect of 'flex-shrink-0' on a flex item in Tailwind CSS?

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 Tailwind CSS class is used to create an inline flex container?

Available answers

The 'inline-flex' class creates an inline flex container in Tailwind CSS.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, how do you set an element to not wrap flex items?

Available answers

The 'flex-nowrap' class ensures that flex items will not wrap to the next line.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS utility class would you use to distribute flex items equally on the main axis?

Available answers

The 'justify-evenly' utility distributes flex items evenly on the main axis, with equal space around them.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What Tailwind CSS utility would you use to align items to the center in a flex container?

Available answers

The 'items-center' class centers items along the cross axis in a flex container.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following classes can be used to align flex items to the start of the cross axis?

Available answers

The class 'items-start' aligns flex items to the start of the cross axis in Tailwind CSS flexbox layout.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
What effect does 'justify-self-end' have on a grid item in Tailwind CSS?

Available answers

'justify-self-end' positions the grid item at the end of its column.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, which class will set the grid layout to two columns?

Available answers

'grid-cols-2' in Tailwind CSS specifies that the grid layout should have two columns.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS utility class sets a grid container to a default gap between rows and no gap between columns?

Available answers

Using 'gap-y-4 gap-x-0' specifies a vertical spacing of 1rem (16px) and zero horizontal space between items.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, what does the 'grid-flow-col' utility class do?

Available answers

The 'grid-flow-col' utility causes grid items to be placed in column order, flowing down the columns.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you reverse the order of grid items in Tailwind CSS?

Available answers

Tailwind CSS does not have a direct utility to reverse grid items; custom order must be set on each item.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class would you use to equally distribute space between all flex items on the main axis?

Available answers

'justify-around' distributes space around each item, meaning equal space around all items.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, what does the utility 'auto-rows-auto' achieve?

Available answers

The 'auto-rows-auto' utility sets row sizing to automatically fit the content within each grid row.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply a flexbox layout to an element using Tailwind CSS?

Available answers

Using the 'flex' class automatically changes the display property of an element to 'flex'.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you lay out flex items as rows reversing their order in Tailwind CSS?

Available answers

'flex-row-reverse' reverses the order of flex items when displayed in rows.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the effect of 'flex-shrink-0' on a flex item in Tailwind CSS?

Available answers

'flex-shrink-0' makes sure the flex item will not shrink, regardless of available space.