Recommended
Challenge - 5 Problems
Flexbox Utility Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate2:00remaining
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; } } }
Attempts:
2 left
💡 Hint
Look at how the @each loop creates classes with suffixes from the list.
✗ Incorrect
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
intermediate1:30remaining
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?Attempts:
2 left
💡 Hint
Remember: 'wrap' means items can move to next line, 'nowrap' means stay on one line.
✗ Incorrect
The class .flex-wrap sets flex-wrap: wrap, allowing items to wrap onto multiple lines. .flex-nowrap sets flex-wrap: nowrap, preventing wrapping.
❓ selector
advanced2:30remaining
Which SASS selector correctly generates responsive flex-direction classes?
You want to create flex-direction utility classes for mobile and desktop using SASS variables:
Which option shows the correct CSS output for these classes?
$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; } } } }
Attempts:
2 left
💡 Hint
Look at how the class names combine breakpoint and direction in the order: flex-#{$bp}-#{$dir}.
✗ Incorrect
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
advanced1:30remaining
What visual layout results from this flexbox utility class?
Consider this CSS class:
What will you see when this class is applied to a container with multiple child boxes?
.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?
Attempts:
2 left
💡 Hint
justify-content centers items along the main axis, align-items centers along the cross axis.
✗ Incorrect
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
expert2:00remaining
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?
Attempts:
2 left
💡 Hint
Think about the semantic meaning of navigation menus for assistive technologies.
✗ Incorrect
The role="navigation" explicitly tells screen readers that this container is a navigation landmark, improving accessibility and keyboard navigation.