UIFlex: FlexBox & FlexGraphic – Best UI Solution
🧩 FlexBox + FlexGraphic – Responsive Layout & Stylish Graphics for Unity UI
FlexBox ...
by Gamebelieve
Price History +
🧩 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
