CSS Flexbox and Grid Fundamentals Quiz Quiz

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.

1. Flex Container Display

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

   1. position: flex;
   2. display: flex;
   3. flex-direction: block;
   4. flex-container: on;

   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. Main Axis Direction

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

   1. Right to left
   2. Bottom to top
   3. Left to right
   4. Top to bottom

   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. Grid Template Columns

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

   1. flex-columns
   2. columns-set
   3. grid-template-columns
   4. layout-cols

   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. Centering in Flexbox

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

   1. float: center;
   2. justify-content: center;
   3. align-items: start;
   4. item-center: horizontal;

   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. Grid vs Flexbox

   When should you prefer Grid layout over Flexbox?

   1. When you need float-based layouts
   2. When arranging content in both rows and columns
   3. When only arranging items in a single row
   4. When using only inline elements

   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. Default Flex Direction

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

   1. Row (left to right)
   2. Column (top to bottom)
   3. Row (right to left)
   4. Grid

   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. Grid Item Placement

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

   1. spanning-columns
   2. column-span
   3. flex-grow
   4. 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. Spacing in Flexbox

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

   1. Creates a 20px border around the container
   2. Sets each item's width to 20px
   3. Merges all flex items into one
   4. 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. Aligning Items in Grid

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

   1. justify-items: start;
   2. align-items: center;
   3. center-items: vertical;
   4. vertical-align: middle;

   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. Flex Grow Property

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

    1. It sets the item to be the second in order
    2. It adds 2 pixels of space to the item
    3. It allows the item to grow twice as much compared to others
    4. It doubles the item’s font size

    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.