Skip to Content
DocsDeveloper GuideCSS & StylingLayoutCSS Layout

CSS Layout

WebF supports modern CSS layout techniques that enable you to build sophisticated user interfaces. This guide covers the layout systems available in WebF with examples from the WebF integration tests.

Supported Layout Systems

WebF implements the following CSS layout systems:

  • Flexbox ✅ (Recommended)
  • Positioned Layout ✅ (static, relative, absolute, fixed, sticky)
  • Flow Layout ✅ (block, inline, inline-block, contents)
  • RTL Support ✅ (Right-to-left text)
  • CSS Grid ⏳ (Coming soon)
  • Float Layout ❌ (Not supported)

Layout Guides

Flexbox Layout

Master one-dimensional layouts with Flexbox - the recommended layout system for most UIs in WebF:

  • Direction - Control row vs column layout
  • Justify Content - Align items along the main axis (space-between, space-around, space-evenly, center)
  • Align Items - Align items along the cross axis (stretch, flex-start, center, flex-end)
  • Align Content - Control spacing between flex lines when wrapping
  • Flex Grow/Shrink - Make items flexible and responsive
  • Flex Basis - Set initial size before growing or shrinking
  • Order - Control visual order without changing DOM
  • Gap - Add spacing between flex items
  • Nested Containers - Build complex layouts with nested flexbox

Learn Flexbox →

Positioned Layout

Precise element placement with CSS positioning:

  • Static - Default positioning in normal document flow
  • Relative - Offset from normal position
  • Absolute - Position relative to nearest positioned ancestor
  • Fixed - Position relative to viewport
  • Sticky - Toggle between relative and fixed based on scroll

Learn Positioning →

Flow Layout

Understand the default layout mode with block and inline elements:

  • Block Elements - Stack vertically, take full width
  • Inline Elements - Flow horizontally, size to content
  • Inline-Block - Flow like inline but accept width/height
  • Display: None - Hide elements without affecting layout
  • Margin Collapsing - Adjacent vertical margins collapse
  • Normal Flow Stacking - Default document flow behavior

Learn Flow Layout →

Overflow

Control how content that exceeds element bounds is handled:

  • Overflow: Hidden - Clip content without scrollbars
  • Overflow: Auto - Show scrollbars only when needed
  • Overflow: Scroll - Always show scrollbars
  • Overflow-X / Overflow-Y - Control horizontal and vertical separately
  • Scrollable Containers - Create scrollable regions
  • Text Truncation - Ellipsis for overflowing text

Learn Overflow →

Quick Start

Choosing a Layout System

Use Flexbox when:

  • Building navigation bars, toolbars, or headers
  • Creating card grids or lists
  • Centering content (vertically or horizontally)
  • Building responsive layouts that adapt to content size
  • Need precise control over spacing and alignment

Use Positioned when:

  • Creating overlays or modals
  • Building fixed headers or footers
  • Positioning tooltips or dropdowns
  • Creating sticky navigation elements
  • Need absolute control over element placement

Use Flow when:

  • Working with text-heavy content
  • Building traditional document layouts
  • Need simple stacking behavior

Next Steps

Layout Guides

Other CSS Guides

OverviewFlexbox