Quiz - Advanced CSS Layouts – Flexbox and Grid

Advanced CSS Layouts – Flexbox and Grid

This quiz evaluates your knowledge of advanced CSS layout techniques, focusing on the key concepts of Flexbox and Grid. It tests your ability to use these systems for creating both simple and complex layouts in responsive web design.

Question 1 Which of the following is true about the flex-direction: column; property?: It arranges flex items from left to right. It arranges flex items from top to bottom. It arranges flex items in reverse order. It disables the flex layout.

Question 2 What is the main purpose of Flexbox?: To create multi-dimensional layouts To create one-dimensional layouts To apply styles to inline elements To position elements absolutely on a page

Question 3 Which layout system is better suited for creating complex, two-dimensional layouts?: Flexbox CSS Grid Inline-block layout Absolute positioning

Question 4 What does the grid-template-areas property do?: Defines a grid layout using named areas Defines the number of rows in a grid Aligns grid items along the main axis Assigns a grid item to a specific column

Question 5 What is the purpose of align-self in Flexbox?: To align a single flex item along the main axis To align a single flex item along the cross-axis To align all flex items to the start of the container To align the container to the page's center

Question 6 What does the justify-content: center; property do in Flexbox?: Aligns items vertically in the center Aligns items horizontally in the center Aligns items to the start of the container Aligns items to the end of the container

Question 7 In Flexbox, which property aligns items along the cross-axis (perpendicular to the main axis)?: justify-content align-content flex-direction align-items

Question 8 Which property is used to define the number of columns in a CSS grid layout?: grid-template-columns; grid-template-rows; display: grid; column-count;

Question 9 In a CSS Grid, what does grid-gap control?: The gap between grid items The width of grid columns The size of each grid item The space between text inside grid items

Question 10 Which property enables Flexbox on a container?: display: block; display: inline; display: flex; display: grid;

Answer all the questions then submit.

Advanced CSS Layouts – Flexbox and Grid

Question 1

Which of the following is true about the flex-direction: column; property?

Question 2

What is the main purpose of Flexbox?

Question 3

Which layout system is better suited for creating complex, two-dimensional layouts?

Question 4

What does the grid-template-areas property do?

Question 5

What is the purpose of align-self in Flexbox?

Question 6

What does the justify-content: center; property do in Flexbox?

Question 7

In Flexbox, which property aligns items along the cross-axis (perpendicular to the main axis)?

Question 8

Which property is used to define the number of columns in a CSS grid layout?

Question 9

In a CSS Grid, what does grid-gap control?

Question 10

Which property enables Flexbox on a container?