UIFlex: FlexBox & FlexGraphic - Best UI Solution

🧩 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: [email protected]

Documentation:

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