CSS — Layout

← Back to index · ← Supported CSS

Weva implements its own block, inline, flex, grid, and positioned layout. Flex and grid are full reimplementations (not Yoga). Source lives under Runtime/Layout/ (InlineLayout.cs, Flex/, Grid/, Positioning/, Scrolling/, Tables/).

display

block, inline, inline-block, flex, inline-flex, grid, inline-grid, none, contents.

A real inline formatting context flows prose, mixed <span>/<strong>/<a> runs, and text-with-icons — the thing UI Toolkit cannot do. Mixed-style inline runs render correctly within a line.

Box model

• width, height, min-/max-width, min-/max-height.
• Logical sizes: inline-size, block-size, and logical min/max.
• padding, margin, border — physical and logical longhands + shorthands. Note: the paint converter reads longhand border properties; the border: 1px solid red shorthand is expanded by the cascade's BorderShorthandExpander.
• box-sizing: content-box (default, per spec) and border-box.
• border-radius per-corner, including the elliptical h / v slash form.

Margin collapsing is implemented per CSS Box Model §8.3.1 (sibling pairs, parent-first/last collapse, self-collapsing empty blocks). inline-block shrink-to-fits and participates in the IFC.

Flexbox

Full property surface: flex, flex-direction, flex-wrap, flex-basis, flex-grow, flex-shrink, justify-content, align-items, align-self, align-content, gap/row-gap/column-gap, order. Row-flex baseline cross-axis alignment uses each item's first-line ascent.

v1 simplifications:

• min-content / max-content sizing keywords are treated as auto.
• aspect-ratio is not honored in flex sizing.
• Column-flex baseline cross-alignment falls back to flex-start.
• Item min/max main-size constraints are single-pass (no clamp loop).
• Longhand flex initial values don't override a user-set flex shorthand (the cascade doesn't yet track explicit-vs-initial).
• Text directly inside a flex container falls into anonymous-block flow rather than becoming an anonymous flex item.

Grid

Own implementation: track parser, areas parser, placement resolver, two-pass track sizing, fr distribution, gap, alignment, auto-flow. Supports grid-template-columns/rows, grid-template-areas, grid-column, grid-row, grid-auto-flow, grid-auto-columns/rows, place-items, place-content, place-self, repeat(), minmax(), fr, auto-fill, auto-fit, and subgrid on grid-auto-rows/columns. Intrinsic track sizing for spanning items follows the §11.5 growth-limit-priority walk.

Positioning

position: static, relative, absolute, fixed, sticky, with top/right/bottom/left, z-index, and stacking contexts. Anchor positioning (anchor-name, position-anchor, anchor(), position-try-fallbacks) is implemented under Layout/AnchorPositioning/.

v1 simplifications:

• position: sticky is single-axis (top OR bottom — top wins when both are set; same for left/right). Sticky offsets recompute on scroll even on paint-only frames.
• position: fixed uses the viewport (unaffected by ancestor scroll).
• The absolute-positioning containing block is the nearest positioned ancestor's border-box.
• Both-pinned absolute boxes (top: 0; bottom: 0) don't iterate to reconcile with intrinsic sizes, and don't re-flow their interior.
• Positioned descendants with z-index: auto do not create their own stacking context (older-spec behavior); fixed/sticky always do.

Overflow & scrolling

overflow, overflow-x, overflow-y: visible, hidden, scroll, auto, clip. Scroll containers, scrollbars, position: sticky integration, scroll snap, and smooth scrolling exist (Layout/Scrolling/). Scrollbar appearance is fixed (no ::-webkit-scrollbar; partial scrollbar-color/scrollbar-width round-trip). No overscroll chaining or scroll anchoring.

Logical axes & RTL

direction: rtl flips horizontal inline-start/end mapping, text-align: start/end, logical insets/sizes/box edges, and row-flex main-axis order. writing-mode remaps logical properties for vertical/sideways modes, but glyph flow stays horizontal — vertical text layout is a v1 non-goal. unicode-bidi is registered but no bidi reordering is performed.

Floats & tables

float: left/right with clear and per-paragraph exclusion is implemented (Layout/Floats/), though the PLAN recommends flex/grid for new UI. Runtime tables exist including collapsed-border winner resolution; advanced fragmentation is out of v1.

Next: CSS Visual · CSS Text