CSS3 Advanced Topics

Flexbox (Flexible Box Layout) is a CSS layout model designed for one-dimensional layouts — arranging items along a single axis, either a row or a column. You activate it by setting display: flex (block-level) or display: inline-flex (inline-level) on a parent element, which then becomes the flex container; its direct children become flex items.

Container properties:

• flex-direction: sets the main axis — row (default), row-reverse, column, column-reverse
• flex-wrap: controls whether items wrap to new lines — nowrap (default), wrap, wrap-reverse
• justify-content: aligns items along the main axis — flex-start, center, space-between, space-around, space-evenly
• align-items: aligns items along the cross axis — stretch (default), center, flex-start, flex-end, baseline
• align-content: aligns multiple rows/columns when wrapping is enabled
• gap (also row-gap, column-gap): sets spacing between items without using margins

Item properties:

• flex-grow: factor by which an item grows to fill available space (default 0)
• flex-shrink: factor by which an item shrinks when space is tight (default 1)
• flex-basis: the item's initial size before growing or shrinking (default auto)
• flex: shorthand for flex-grow flex-shrink flex-basis — flex: 1 is a common pattern meaning the item grows and shrinks equally
• align-self: overrides the container's align-items for one item
• order: controls visual order independent of DOM order

Common gotchas interviewers probe:

• flex: 1 is shorthand for 1 1 0 — the 0 basis means items share space equally, ignoring their natural size. flex: auto means 1 1 auto, which respects natural size first.
• min-width: 0 is often needed on flex items containing text or nested flex containers, because flex items default to min-width: auto which prevents proper shrinking.
• align-items vs justify-content axes swap when flex-direction: column is used — interviewers ask this frequently.
• gap in flexbox has full browser support since 2021; margins between items were the old workaround.
• Flexbox does not inherently create equal-height columns in a grid sense; for a true two-dimensional layout, CSS Grid is the better tool.
• order changes visual order but not the DOM order, which affects accessibility (tab/focus order follows the DOM).

Flexbox is ideal for navigation bars, card rows, centering content, and any UI component that needs items to grow, shrink, and align along one axis.

Pseudo-classes are CSS selectors that target elements based on their state, position, or relationship within the document tree. They are prefixed with a single colon (:) and do not require changes to the HTML markup.

User interaction states:

• :hover — element is being pointed at
• :focus — element has keyboard/programmatic focus; use this for accessibility, not just :hover
• :focus-visible — focus is visible (i.e., keyboard navigation), but not when clicking; preferred in 2026 for styling focus rings without affecting mouse users
• :focus-within — any descendant of the element has focus; useful for styling form wrappers
• :active — element is being activated (e.g., a button being pressed)

Structural / tree-position:

• :first-child, :last-child — first or last child of their parent
• :nth-child(n) — flexible selector; accepts integers, keywords (even, odd), or the An+B formula; e.g., :nth-child(3n+1)
• :nth-of-type(n) — like :nth-child but scoped to elements of the same type
• :only-child, :only-of-type — matches when there is exactly one child
• :not(selector) — negation; accepts a full selector list in modern CSS, e.g., :not(.disabled, [aria-hidden])
• :is(selector-list) — matches if any selector in the list matches; reduces repetition and takes the specificity of its most specific argument
• :where(selector-list) — same as :is() but always has zero specificity; good for resets and layers
• :has(selector) — "parent selector"; selects an element if it contains a matching descendant, e.g., form:has(input:invalid) styles the form when it has an invalid input. Fully supported in all major browsers as of 2024.

Form / input states:

• :checked, :disabled, :enabled, :required, :optional
• :valid, :invalid, :in-range, :out-of-range
• :placeholder-shown — input currently showing its placeholder text
• :user-valid, :user-invalid — like :valid/:invalid but only trigger after the user has interacted with the field, avoiding premature error styling on page load

Other useful pseudo-classes:

• :root — matches the document root (``); commonly used for CSS custom property declarations
• :empty — element with no children (including no text nodes)
• :target — element whose id matches the URL fragment
• :any-link — matches any element that is a hyperlink, regardless of :visited state

Common interview gotcha: :nth-child counts all sibling elements regardless of type, while :nth-of-type counts only siblings of the same element type. Mixing them up is a classic source of bugs. Also note that :has() is now a game-changer for reducing JavaScript-driven class toggling — interviewers increasingly ask about it.

Media queries let you apply CSS rules conditionally based on characteristics of the viewport, device, or output medium. They are the backbone of responsive design.

Basic syntax:

@media screen and (max-width: 768px) {
  /* rules for screens up to 768px wide */
}

Media types: screen, print, all (default). speech is part of the spec but rarely used. tv, handheld, etc., were deprecated long ago.

Common media features:

• width, min-width, max-width — viewport width (most commonly used)
• height, min-height, max-height
• orientation: portrait | landscape
• resolution — screen pixel density
• prefers-color-scheme: dark | light — system-level dark mode preference; now standard practice
• prefers-reduced-motion: reduce — respect users who disable animations; should be in every production codebase
• prefers-contrast: more | less
• hover: none — detects touch-only devices (no pointer hover); useful for hiding hover-only UI
• pointer: coarse | fine — coarse means touch, fine means mouse; lets you size tap targets appropriately

Range syntax (modern CSS): The older min-width/max-width pattern is being replaced by range syntax for clarity:

@media (width >= 768px) and (width < 1200px) {
  /* tablet range */
}

This is supported in all modern browsers and avoids the confusion of min/max off-by-one overlaps.

Container queries (@container): Introduced and now fully supported, container queries are the 2026 answer to component-level responsiveness. Instead of querying the viewport, you query a named container's size:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (width >= 400px) {
  .card { flex-direction: row; }
}

This solves the long-standing problem where components behave differently depending on where they are placed, not just what the viewport size is.

@layer interaction: Media queries can be combined with cascade layers for fine-grained specificity control. Putting responsive overrides in a separate layer prevents specificity wars.

Common gotchas:

• Mobile-first means using min-width (add styles as screens get bigger), not max-width (strip styles as screens get smaller). Mobile-first results in simpler, additive CSS.
• Without the `tag, media queries based onwidth` do not behave correctly on mobile browsers, which default to a virtual 980px viewport.
• max-width: 768px and min-width: 768px both trigger at exactly 768px — be precise about whether your breakpoints should be inclusive or exclusive.
• prefers-reduced-motion is not optional for accessibility compliance (WCAG 2.2 AA).

CSS Grid is a two-dimensional layout system that lets you place elements into explicit rows and columns, giving you precise control over both axes simultaneously.

Defining a grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

Key concepts:

• grid-template-columns / grid-template-rows — define the track sizes. Units can be px, %, fr (fraction of available space), auto, min-content, max-content, or minmax().
• fr unit — distributes remaining space proportionally after fixed sizes are resolved. 1fr 2fr creates a 1:2 split.
• repeat() — shorthand for repeating tracks; repeat(3, 1fr) creates three equal columns.
• minmax(min, max) — a track grows between a minimum and maximum size.
• auto-fill vs auto-fit: both create as many tracks as fit, but auto-fit collapses empty tracks while auto-fill preserves them.
• gap (formerly grid-gap) — sets spacing between rows and columns.

Placing items: Items auto-place by default following the grid auto-placement algorithm. You can override this:

.item {
  grid-column: 1 / 3;   /* span from line 1 to line 3 */
  grid-row: 2 / 4;
}

Shorthand: grid-area: row-start / col-start / row-end / col-end.

Named areas:

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

This is highly readable and makes layout changes trivial.

Alignment:

• justify-items / align-items — aligns all items within their cells (inline vs block axis)
• justify-content / align-content — aligns the grid tracks within the container when there is extra space
• justify-self / align-self — per-item overrides

Subgrid: grid-template-columns: subgrid lets a nested grid inherit its parent's track definitions. This solves the long-standing problem of aligning content inside cards to a parent grid. Subgrid is now fully supported across all major browsers.

Common gotchas:

• Grid lines are numbered starting at 1 (not 0). Negative numbers count from the end (-1 is the last line).
• grid-column: span 2 is relative spanning; grid-column: 1 / 3 is explicit placement — they look similar but behave differently with auto-placement.
• Grid does not replace Flexbox — Grid excels at two-dimensional page/component layout; Flexbox is better for one-dimensional item distribution within a component.
• display: grid does not affect elements outside the grid container; children become grid items, but grandchildren do not.

CSS transitions allow you to animate a CSS property from one value to another smoothly over a specified duration, triggered by a state change (like :hover, :focus, or a class being added via JavaScript).

The transition shorthand:

.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease;
}
.button:hover {
  background-color: darkblue;
  transform: scale(1.05);
}

The four sub-properties:

• transition-property — which CSS property to animate (all works but is bad for performance)
• transition-duration — how long the transition takes (e.g., 300ms, 0.3s)
• transition-timing-function — easing curve: ease (default), linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier()
• transition-delay — how long to wait before starting (useful for staggered effects)

Properties that can be transitioned: Only properties with numeric or color interpolatable values can be transitioned — opacity, transform, color, background-color, width, height, border-radius, etc. Properties like display and visibility cannot be transitioned directly (though display is gaining transition support in 2024+ with the @starting-style rule).

Performance considerations: Animating transform and opacity is GPU-composited and does not trigger layout or paint — these are the only two properties you should animate for high-performance transitions. Animating width, height, top, left, or margin triggers layout recalculation and can cause jank, especially on mobile.

@starting-style (modern CSS): Allows transitioning an element's initial state when it first appears in the DOM or transitions from display: none:

.dialog {
  transition: opacity 0.3s;
  opacity: 1;
}
@starting-style {
  .dialog { opacity: 0; }
}

This is now supported in Chrome, Edge, and Firefox, removing the need for a JavaScript setTimeout hack to trigger enter animations.

Transitions vs animations:

• Transitions are event-driven (require a state change to trigger) and go from A to B once.
• CSS animations (@keyframes) run automatically, can loop, and can define multiple intermediate states.

Common gotchas:

• transition: all catches unintended property changes and can cause performance issues — always name specific properties.
• A transition on the base element triggers on both entering and leaving a state. To have different durations in each direction, declare separate transitions on the base and the :hover/active state.
• Transitioning height: auto does not work because auto is not a calculable intermediate value; use max-height as a workaround, or the newer CSS interpolate-size / calc-size() approach now landing in browsers.