Practical frontend engineering guides for React, Next.js, TypeScript, and web performance.
8 items under this tag.
Topic Filter
Showing the most-used tags first so the archive stays easy to scan. Click a tag to browse only that topic.
Current tag
flexbox8Understand what Flexbox is actually good at, how its axes work, and how alignment properties distribute space so your layouts stop feeling magical.
Use Flexbox to build the layout patterns developers actually ship, from centered heroes and equal-height cards to sticky footers and split panes.
Follow the Flexbox sizing algorithm step by step so you can predict how free space, negative space, and min-size clamping affect each item.
Choose between Flexbox and Grid based on axis, placement, source order, and component responsibility instead of repeating the vague one-dimensional versus two-dimensional slogan.
Use `min-height: 0`, inner scroll wrappers, auto margins, non-stretch alignment, and `flex-shrink: 0` to prevent broken scrolling and distorted UI in Flexbox and Grid.
Use `flex-wrap`, content-aware Flexbox sizing, and Grid RAM patterns with `repeat(auto-fit, minmax())` to prevent broken layouts and horizontal overflow.
Understand when `display: contents` helps flatten wrappers for layout participation, where it creates tradeoffs, and why it is not a universal replacement for subgrid.
Learn how automatic minimum size and `min-content` cause `flex: 1`, `1fr`, long words, and scrollable components to overflow, and when to use `min-width: 0`, `overflow: hidden`, or `minmax(0, 1fr)`.