Test your knowledge of CSS with these interactive multiple-choice questions.
21. Which CSS property controls the stacking order of elements?
z-index determines the stack order of positioned elements (higher values appear on top).
22. Which CSS property creates a flex container?
flex and inline-flex enable Flexbox layout.
23. Which CSS property aligns flex items along the main axis?
justify-content controls alignment on the main axis (e.g., center, space-between).
24. Which CSS property aligns flex items along the cross axis?
align-items aligns items vertically in a row or horizontally in a column.
25. Which CSS property changes the direction of flex items?
flex-direction: row|column|row-reverse|column-reverse sets the main axis direction.
26. Which CSS property allows flex items to wrap to new lines?
flex-wrap: wrap allows items to wrap when space is insufficient.
27. Which CSS shorthand property combines flex-direction and flex-wrap?
flex-flow: row wrap is shorthand for direction + wrap.
28. Which CSS property distributes space among flex items?
flex-grow defines how much an item grows relative to others.
29. Which CSS property defines the default size of a flex item?
flex-basis: 200px sets the initial main size of a flex item.
30. Which CSS shorthand property combines flex-grow, flex-shrink, and flex-basis?
flex: 1 1 auto is shorthand for grow + shrink + basis.
31. Which CSS property creates a grid container?
grid and inline-grid enable CSS Grid layout.
32. Which CSS property defines grid columns?
grid-template-columns: 1fr 2fr creates two columns with a 1:2 ratio.
33. Which CSS property defines grid rows?
grid-template-rows: 100px auto sets explicit and implicit row sizes.
34. Which CSS property creates gaps between grid items?
gap (modern) and grid-gap (legacy) define gutters between grid items.
35. Which CSS property positions a grid item along the column axis?
grid-column: 1 / 3 spans an item across columns 1 to 3.
36. Which CSS property positions a grid item along the row axis?
grid-row: 2 / 4 spans an item across rows 2 to 4.
37. Which CSS property defines named grid areas?
grid-template-areas: "header header" "sidebar main" creates visual layouts.
38. Which CSS property aligns grid items along the inline (row) axis?
justify-items aligns items horizontally in their grid cells.
39. Which CSS property aligns grid items along the block (column) axis?
align-items aligns items vertically in their grid cells.
40. Which CSS property creates a multi-column layout?
column-count: 3 splits content into 3 columns.