CSS Layout Master Quiz Quiz

1. Flexbox Main Axis

   In Flexbox, what property controls the alignment of items along the main axis?

   1. align-items
   2. justify-content
   3. align-content
   4. justify-items
   5. justified-content

2. CSS Grid Tracks

   Which CSS Grid property defines the rows and columns of the grid container?

   1. grid-template
   2. grid-area
   3. grid-layout
   4. grid-template-areas
   5. gride-template

3. Position: Sticky

   What does `position: sticky` do to an element?

   1. It fixes the element to the viewport.
   2. It makes the element relative to its parent.
   3. It toggles between relative and fixed, depending on the scroll position.
   4. It makes the element float.
   5. It makes the element stick

4. Clearing Floats

   Which CSS property is commonly used to clear floats?

   1. overflow
   2. clear
   3. float
   4. clearfix
   5. display

5. Flexbox Wrap

   Which Flexbox property controls whether items wrap onto multiple lines?

   1. flex-direction
   2. flex-wrap
   3. flex-flow
   4. flex-basis
   5. flexwrap

6. Grid Gap

   How do you create a gap between grid tracks using a single property?

   1. grid-gap
   2. grid-row-gap
   3. grid-column-gap
   4. gap
   5. gride-gap

7. Absolute Positioning Context

   An element with `position: absolute` is positioned relative to which element?

   1. The viewport
   2. The document root
   3. Its nearest positioned ancestor
   4. Its parent element
   5. The body element

8. Float and Text

   When an element is floated, what happens to the surrounding text?

   1. The text wraps around the floated element.
   2. The text is pushed below the floated element.
   3. The text overlaps the floated element.
   4. The text is hidden behind the floated element.
   5. The text ignores the floated element

9. Flex Grow

   What does the `flex-grow` property do in Flexbox?

   1. Specifies the initial size of a flex item
   2. Defines the alignment of items along the cross axis
   3. Determines the order of flex items
   4. Specifies how much the item will grow relative to the other flex items
   5. Specifies how much the item will shrink relative to the other flex items

10. Grid Area Placement

    How can you place a grid item into a specific grid area using named lines?

    1. grid-template-areas
    2. grid-area
    3. grid-column-start / grid-column-end / grid-row-start / grid-row-end
    4. grid-place-items
    5. gride-area