UIFlex: FlexBox & FlexGraphic – Best UI Solution

Publisher

Gamebelieve

Please Note

This entry is from Wednesday August 26, 2026. The price of the asset may have changed since then.
Please visit our homepage for recent offers and sales. Official and private Unity Asset Store™ sales usually last about 14 days.

Overview

🧩 FlexBox + FlexGraphic – Responsive Layout & Stylish Graphics for Unity UI

FlexBox and FlexGraphic are powerful and easy-to-use tools to build responsive, clean, and modern interfaces inside Unity’s UI system. Inspired by CSS Flexbox, these components let you create dynamic layouts and stylish visuals in seconds.

🔧 What’s Included?

✅ FlexBox – Flexible Layout System for Canvas

• Auto alignment using Justify Content and Align Items
• Full support for Direction, Wrap, and nested layouts
• Web-style behavior just like CSS Flexbox
• Complete control over element order, spacing, and direction
• Ideal for dynamic menus, HUDs, and scalable UIs
• Fully compatible with Unity’s UGUI system

🎨 FlexGraphic – Visual Styling Made Easy

• Code-based drawing — no external images needed
• Rounded corners and border thickness customization
• Instant visual tweaking from the Inspector
• Perfect for buttons, panels, cards, and more
• Lightweight and optimized, with minimal overdraw

⚡ Key Benefits

• 🎯 Rapid UI layout building
• 📱 Fully responsive design
• 🧼 Cleaner hierarchy structure
• 🎨 Image-free stylized graphics
• 🧩 Perfect for adaptive and scalable projects
• 🧠 No more anchor and RectTransform headaches

🛠 100% extensible and written with SOLID principles.

Components details:

Container Properties:

• Direction: Row, Column, RowReverse, ColumnReverse
• Wrap: NoWrap, Wrap, WrapReverse
• JustifyContent: FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly
• AlignItems: FlexStart, FlexEnd, Center, Stretch
• AlignContent: FlexStart, FlexEnd, Center, Stretch, SpaceBetween, SpaceAround
• Gap: Space between child elements
• Padding: Inner spacing
• ReverseOrder: Reverse the order of children

Item Properties:

• FlexGrow:How much the item can grow
• FlexShrink: How much the item can shrink
• FlexBasis: Initial size of the item
• AlignSelf: Override parent's align-items
• Order: Visual order of the item
• Position: Relative or Absolute positioning
• Width/Height: Size constraints
• MinWidth/MinHeight: Minimum size constraints
• MaxWidth/MaxHeight: Maximum size constraints
• Margin: Outer spacing
• IgnoreLayout: Skip this element in layout calculations
• LayoutPriority: Priority for layout calculations

FlexSize

A flexible size system supporting:

• Pixels: Fixed size in pixels
• Percentage: Size relative to parent
• Auto: Automatic sizing based on content

FlexSpacing

A comprehensive spacing system for padding and margin with:

• Individual control over top, right, bottom, left
• Quick "set all" functionality
• Visual preview of spacing

FlexGraphic

• Advanced graphic component with rounded corners and borders:
• Rounded Corners: Individual or unified corner radius
• Borders: Customizable border width and color
• Fill Effects: Multiple fill directions and patterns
• Sprite Support: Full sprite rendering with UV mapping
• Mask Support: Integration with Unity's masking system
• Raycast Filtering: Pixel-perfect hit testing

UxmlToFlexConverter

Convert UI Toolkit UXML files to FlexBox-based GameObjects:

• UXML Import: Import VisualTreeAsset files
• Style Conversion: Convert UI Toolkit styles to FlexBox properties
• Hierarchy Preservation**: Maintain original element hierarchy
• Component Generatio: Automatically add appropriate UI components
• Debug Support: Comprehensive logging and error handling

📝Support

• Discord: https://discord.gg/9grad2eQhd
• Linkedin: https://www.linkedin.com/in/eduardo-varela-dev/
• Email: eduardo.varela.juegos@gmail.com

Documentation:

https://flexbox-documentation.web.app/