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: eduardo.varela.juegos@gmail.com Documentation: https://flexbox-documentation.web.app/