Flex basis and sizing in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding flex-basis in Tailwind CSS

What is the effect of applying flex-basis using Tailwind's basis-1/4 class on a flex item inside a flex container?

Tailwind

<div class="flex">
  <div class="basis-1/4 bg-blue-500">Box 1</div>
  <div class="flex-1 bg-red-500">Box 2</div>
</div>

A The first box takes up exactly 25% of the container's main axis width, and the second box fills the rest.

B The first box grows to fill the container, ignoring the 25% basis, and the second box shrinks.

C Both boxes share the container width equally regardless of basis.

D The first box shrinks to 25px width, and the second box fills the rest.

💡 Hint

Remember that basis-1/4 sets the initial size before growing or shrinking.

The basis-1/4 class sets the flex-basis to 25% of the container's width. This means the first box starts at 25% width. The second box with flex-1 grows to fill the remaining space.

📝 Syntax

intermediate

Tailwind class for fixed flex-basis

Which Tailwind CSS class sets a flex item's flex-basis to exactly 10rem?

A basis-[10rem]

B basis-40

C basis-10rem

D basis-2.5

💡 Hint

Use square brackets for arbitrary values in Tailwind.

Tailwind uses square brackets to specify arbitrary values like basis-[10rem]. The class basis-10rem does not exist by default.

❓ rendering

advanced

Visual effect of flex-basis with grow and shrink

Given this HTML, what will be the width of the blue box inside a 400px wide container?

Tailwind

<div class="flex w-[400px]">
  <div class="basis-1/2 flex-shrink-0 bg-blue-500">Blue Box</div>
  <div class="flex-1 bg-green-500">Green Box</div>
</div>

A The blue box will collapse to zero width.

B The blue box will shrink below 200px to fit the container.

C The blue box will grow larger than 200px to fill extra space.

D The blue box will be exactly 200px wide and will not shrink.

💡 Hint

Check the effect of flex-shrink-0 on the flex item.

The basis-1/2 sets the base width to 50% (200px). The flex-shrink-0 prevents shrinking, so the blue box stays at 200px even if space is tight.

❓ selector

advanced

Selecting flex items by basis size in Tailwind

Which CSS selector targets all flex items with flex-basis set to 25% using Tailwind's basis-1/4 class?

A .basis-1/4

B .basis-1\/4

C [class*=basis-1/4]

D .basis-1-4

💡 Hint

Remember how Tailwind escapes slashes in class names.

Tailwind escapes slashes in class names with a backslash. The correct selector is .basis-1\/4. Using .basis-1/4 is invalid CSS.

❓ accessibility

expert

Ensuring accessible flex layouts with basis and sizing

When using flexbox with fixed flex-basis sizes in Tailwind, what is the best practice to maintain accessibility for keyboard users and screen readers?

A Avoid using flexbox and basis sizes; use tables instead for layout.

B Set <code>tabindex="-1"</code> on all flex items with fixed basis to prevent keyboard focus.

C Use semantic HTML elements and ensure focus order matches visual order, regardless of flex-basis sizes.

D Add ARIA roles to flex items to override default semantics.

💡 Hint

Think about how keyboard navigation and screen readers follow DOM order.

Accessibility depends on semantic HTML and logical focus order. Flexbox changes visual layout but does not affect DOM order. Using semantic elements and matching focus order ensures accessibility.