Responsiveness Gotcha: Base Flex Class

This example demonstrates the "Gotcha" regarding the base flex class when aiming for a responsive layout that stacks on mobile (column) and goes to row on larger screens.

Incorrect (Illustrating the Gotcha)

Here, the parent container uses sm:flex-row and items-center but lacks the base flex (or flex-col ) for small screens. As a result, on small screens, it's not a flex container, so items-center has no effect. The items stack due to default block behavior. While sm:flex-row will make it a flex container on 'sm' screens and up (making items-center work there), properties like items-center or justify-content won't apply correctly on small screens if the container isn't explicitly `display: flex`.

Item A (Tall)
(Block on mobile)
Item B
(Block on mobile)

Comment: On small screens, "Item A" and "Item B" will stack. If items-center was intended for mobile, it wouldn't work here as the parent is not a flex container on small screens.

Correct Implementation

Here, the parent container uses flex flex-col sm:flex-row items-center . flex makes it a flex container on all screen sizes. flex-col sets the direction to column for small screens. sm:flex-row changes the direction to row on 'sm' screens and up. items-center will now work correctly on all screen sizes because the parent is always a flex container.

Item X (Tall)
(Flex-col item on mobile)
Item Y
(Flex-col item on mobile)

Comment: On small screens, items stack vertically AND are centered because the parent is flex flex-col items-center . On 'sm' screens, they are side-by-side and centered.

Resize your browser window and observe the alignment and stacking.

The "Gotcha" highlights that for flex alignment/justification properties (like items-center ) to work consistently across screen sizes, the element must be a flex container ( display: flex ) on those screen sizes. Using flex flex-col as the base ensures this for mobile before sm:flex-row takes over.