CSS Flexbox and Grid Fundamentals Quiz — Questions & Answers

Test your understanding of CSS Flexbox and Grid Layout with this easy-level quiz. Assess your knowledge of core properties, layout techniques, and key differences essential for building responsive web designs using modern CSS layout systems.

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Flex Container Display

   Which CSS property do you use to turn a container into a flex formatting context for its children?

   • position: flex;
   • display: flex;
   • flex-direction: block;
   • flex-container: on;
   Show correct answer

   Correct answer: display: flex;

   Explanation: The 'display: flex;' property enables flexbox layout on a container, allowing its direct children to become flex items. 'position: flex;' is not a valid CSS property, and 'flex-direction: block;' is incorrect as flex-direction only sets the direction, not the display context. 'flex-container: on;' is not a recognized CSS property.

2. Question 2: Main Axis Direction

   If you set 'flex-direction: row-reverse;' on a flex container, in which direction will the main axis flow?

   • Right to left
   • Bottom to top
   • Left to right
   • Top to bottom
   Show correct answer

   Correct answer: Right to left

   Explanation: 'flex-direction: row-reverse;' reverses the default row flow, making the main axis go from right to left. 'Left to right' is the default for 'row'. Flexbox only uses 'top to bottom' and 'bottom to top' for column directions, not row directions.

3. Question 3: Grid Template Columns

   Which property is used to define the number and size of columns in a grid container?

   • flex-columns
   • columns-set
   • grid-template-columns
   • layout-cols
   Show correct answer

   Correct answer: grid-template-columns

   Explanation: 'grid-template-columns' specifies the column track sizes and number in a grid container, allowing explicit control over the grid structure. 'flex-columns', 'columns-set', and 'layout-cols' are not valid CSS grid properties and would not produce any effect.

4. Question 4: Centering in Flexbox

   To horizontally center a single flex item inside a flex container, which property should be set on the container?

   • float: center;
   • justify-content: center;
   • align-items: start;
   • item-center: horizontal;
   Show correct answer

   Correct answer: justify-content: center;

   Explanation: 'justify-content: center;' horizontally centers items along the main axis (default is horizontal in row direction) in a flex container. 'align-items: start;' aligns items to the start of the cross axis, not the center. 'float: center;' and 'item-center: horizontal;' are invalid CSS properties.

5. Question 5: Grid vs Flexbox

   When should you prefer Grid layout over Flexbox?

   • When you need float-based layouts
   • When arranging content in both rows and columns
   • When only arranging items in a single row
   • When using only inline elements
   Show correct answer

   Correct answer: When arranging content in both rows and columns

   Explanation: Grid is intended for two-dimensional layouts, allowing you to control both rows and columns. Flexbox is mainly for one-directional layouts (row or column). Float-based layouts are unrelated to Grid, and while both flexbox and grid can be used with block or inline elements, that is not a distinguishing factor.

6. Question 6: Default Flex Direction

   If you use 'display: flex;' on a container and do not specify 'flex-direction', what is the default direction?

   • Row (left to right)
   • Column (top to bottom)
   • Row (right to left)
   • Grid
   Show correct answer

   Correct answer: Row (left to right)

   Explanation: The default 'flex-direction' when not specified is 'row', meaning items are laid out from left to right. 'Column (top to bottom)' would require setting 'flex-direction: column;'. 'Row (right to left)' requires 'row-reverse', and 'grid' is not a value for flex-direction.

7. Question 7: Grid Item Placement

   Which property allows a grid item to span multiple columns in a grid layout?

   • spanning-columns
   • column-span
   • flex-grow
   • grid-column
   Show correct answer

   Correct answer: grid-column

   Explanation: 'grid-column' defines the start and end line for a grid item, controlling how many columns it spans. 'flex-grow' applies to flexbox and does not influence grid item spanning. 'column-span' and 'spanning-columns' are not standard properties for grid item placement.

8. Question 8: Spacing in Flexbox

   What does 'gap: 20px;' do when applied to a flex container?

   • Creates a 20px border around the container
   • Sets each item's width to 20px
   • Merges all flex items into one
   • Adds 20px space between each flex item
   Show correct answer

   Correct answer: Adds 20px space between each flex item

   Explanation: The 'gap' property (previously called 'grid-gap') adds consistent spacing between flex items. Setting each item's width requires a different property. It does not affect borders or merge items together; its only purpose is controlling the space between items.

9. Question 9: Aligning Items in Grid

   To vertically center all items within each grid cell, which property could you use on the grid container?

   • justify-items: start;
   • align-items: center;
   • center-items: vertical;
   • vertical-align: middle;
   Show correct answer

   Correct answer: align-items: center;

   Explanation: 'align-items: center;' centers content vertically within each grid area or cell. 'justify-items: start;' would align content to the start horizontally. 'vertical-align: middle;' only applies to inline elements, and 'center-items: vertical;' is not a valid CSS property.

10. Question 10: Flex Grow Property

    What does the property 'flex-grow: 2;' do for a flex item among its siblings?

    • It sets the item to be the second in order
    • It adds 2 pixels of space to the item
    • It allows the item to grow twice as much compared to others
    • It doubles the item’s font size
    Show correct answer

    Correct answer: It allows the item to grow twice as much compared to others

    Explanation: 'flex-grow: 2;' lets the flex item take up twice the available space relative to items with 'flex-grow: 1'. It does not affect order, size by pixels, or font size. The other options misunderstand the 'flex-grow' property's function in distributing extra space.