Flexbox utility class generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS snippet?

Given this SASS code, what CSS does it generate?

$directions: row column;
.flex-container {
  display: flex;
  @each $dir in $directions {
    &-#{$dir} {
      flex-direction: $dir;
    }
  }
}

SASS

$directions: row column;
.flex-container {
  display: flex;
  @each $dir in $directions {
    &-#{$dir} {
      flex-direction: $dir;
    }
  }
}

A

.flex-container-row { flex-direction: row; }
.flex-container-column { flex-direction: column; }
.flex-container { display: flex; }

B

.flex-container { display: flex; }
.flex-container-row { flex-direction: column; }
.flex-container-column { flex-direction: row; }

C

.flex-container-row { display: flex; flex-direction: row; }
.flex-container-column { display: flex; flex-direction: column; }

D

.flex-container { display: flex; }
.flex-container-row { flex-direction: row; }
.flex-container-column { flex-direction: column; }

💡 Hint

Look at how the @each loop creates classes with suffixes from the list.

The @each loop appends the direction name to .flex-container- and sets flex-direction accordingly. The display: flex is set on the base .flex-container class only.

🧠 Conceptual

intermediate

Which flex-wrap utility class allows wrapping items to the next line?

You want a utility class that sets flex-wrap to wrap items onto multiple lines. Which class name and property pairing is correct?

A .flex-wrap { flex-wrap: wrap; }

B .flex-nowrap { flex-wrap: wrap; }

C .flex-wrap { flex-wrap: nowrap; }

D .flex-nowrap { flex-wrap: nowrap; }

💡 Hint

Remember: 'wrap' means items can move to next line, 'nowrap' means stay on one line.

The class .flex-wrap sets flex-wrap: wrap, allowing items to wrap onto multiple lines. .flex-nowrap sets flex-wrap: nowrap, preventing wrapping.

❓ selector

advanced

Which SASS selector correctly generates responsive flex-direction classes?

You want to create flex-direction utility classes for mobile and desktop using SASS variables:

$directions: row column;
$breakpoints: mobile desktop;
.flex {
  @each $bp in $breakpoints {
    @each $dir in $directions {
      &-#{$bp}-#{$dir} {
        flex-direction: $dir;
      }
    }
  }
}

Which option shows the correct CSS output for these classes?

SASS

$directions: row column;
$breakpoints: mobile desktop;
.flex {
  @each $bp in $breakpoints {
    @each $dir in $directions {
      &-#{$bp}-#{$dir} {
        flex-direction: $dir;
      }
    }
  }
}

A

.flex-mobile-row { flex-direction: column; }
.flex-mobile-column { flex-direction: row; }
.flex-desktop-row { flex-direction: column; }
.flex-desktop-column { flex-direction: row; }

B

.flex-mobile-row { flex-direction: row; }
.flex-mobile-column { flex-direction: column; }
.flex-desktop-row { flex-direction: row; }
.flex-desktop-column { flex-direction: column; }

C

.flex-mobile { flex-direction: row; }
.flex-desktop { flex-direction: column; }

D

.flex-row-mobile { flex-direction: row; }
.flex-column-mobile { flex-direction: column; }
.flex-row-desktop { flex-direction: row; }
.flex-column-desktop { flex-direction: column; }

💡 Hint

Look at how the class names combine breakpoint and direction in the order: flex-#{$bp}-#{$dir}.

The SASS code concatenates breakpoint first, then direction, so classes like .flex-mobile-row and .flex-desktop-column are generated with correct flex-direction values.

❓ layout

advanced

What visual layout results from this flexbox utility class?

Consider this CSS class:

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

What will you see when this class is applied to a container with multiple child boxes?

A Child boxes are arranged vertically, spaced evenly with gaps.

B Child boxes are stacked vertically at the top-left corner.

C Child boxes are arranged horizontally, aligned to the left and bottom edges.

D Child boxes are arranged horizontally, centered both vertically and horizontally inside the container.

💡 Hint

justify-content centers items along the main axis, align-items centers along the cross axis.

display: flex defaults to row direction (horizontal). justify-content: center centers items horizontally. align-items: center centers items vertically. So children appear in a horizontal row, centered in both directions.

❓ accessibility

expert

Which ARIA role best improves accessibility for a flexbox container used as a navigation menu?

You have a flex container that holds navigation links styled with flexbox. Which ARIA role attribute should you add to the container to help screen readers understand its purpose?

A role="contentinfo"

B role="main"

C role="navigation"

D role="banner"

💡 Hint

Think about the semantic meaning of navigation menus for assistive technologies.

The role="navigation" explicitly tells screen readers that this container is a navigation landmark, improving accessibility and keyboard navigation.