NV NVIDIA Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Bytes Format Datetime Format Number Format Relative Time Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Mute Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Vertical Layout

Vertical layouts provide top-to-bottom content flow that aligns with reading patterns. The Elements vertical layout system uses CSS Flexbox to create stackable layouts that adapt to content and container constraints.

Learn flexbox concepts with the MDN Flexbox guide and practice with this visual Flexbox Froggy game.

Understanding Vertical Layout

Vertical flexbox layouts stack content with control over spacing, alignment, and distribution. They provide natural reading flow while supporting the layout requirements of modern interfaces.

When to Use Vertical Layout

Choose vertical layout (column) for:

  • Forms: Labels above inputs, sections stacked vertically
  • Card content: Header, body, and footer stacked naturally
  • Sidebars: Navigation items or widgets stacked vertically
  • Hero sections: Centered content with title, description, CTA
  • Mobile layouts: Natural stacking for responsive design
  • Article content: Paragraphs, images, and headings in sequence
  • Modal dialogs: Header, content, and actions stacked
Note: vertical layouts are inherently mobile-friendly. Content that stacks vertically works naturally on narrow screens, and you can enhance it for larger displays.

Basic Setup

Set nve-layout="column" on a container element to create a vertical layout:

Alignment Options

Vertical layouts support alignment along both axes:

Primary Axis (Vertical)

  • align:top - Items start from the top (default)
  • align:vertical-center - Items centered vertically
  • align:bottom - Items aligned to bottom
  • align:space-between - Items spread with space between
  • align:space-around - Items spread with space around
  • align:space-evenly - Items spread with even spacing

Cross Axis (Horizontal)

  • align:left - Items aligned to left
  • align:horizontal-center - Items centered horizontally
  • align:right - Items aligned to right
  • align:horizontal-stretch - Items stretch to container width

Combined Alignment

  • align:center - Center both horizontally and vertically
  • align:stretch - Stretch in both dimensions
  • You can combine many values: align:horizontal-center align:bottom
Alignment mental model: in vertical layouts, the main axis runs top-to-bottom and the cross axis runs left-to-right. This reversal from horizontal layouts is key to understanding alignment behavior.

Vertical Layout Examples

Align Top

Align Vertical Center

Align Bottom

Align Horizontal Center

Align Center

Align Center and Bottom

Align Top and Right

Align Center and Right

Align Bottom and Right

Align Space Around

Align Space Between

Align Space Evenly

Align Stretch Horizontal

Align Stretch Vertical

Align Full Stretch

Flex Behavior in Vertical Layouts

Flex Growth

Control how items expand vertically:

Spacing Distribution

Use alignment to control vertical rhythm:

Best Practices

  1. Embrace natural flow: Vertical layouts match reading patterns
  2. Use consistent spacing: Apply gap values systematically
  3. Consider viewport height: Use full or vh units for full-screen layouts
  4. Plan for growth: Use flex: 1 to create expandable regions
  5. Test with varied content: Ensure layouts work with different content lengths
Performance tip: when creating scrollable regions, constrain the height of the container rather than relying on max-height. This provides better performance and more predictable behavior.

Next Steps