TFlexFMXLayout

A responsive container component that implements Bootstrap-like grid system with CSS classes for flexible, mobile-first layouts.

Overview

TFlexFMXLayout provides a powerful layout system inspired by Bootstrap's grid, allowing you to create responsive interfaces that adapt to different screen sizes using CSS-like classes.

Key Features

• Bootstrap-style grid system (12-column layout)
• Responsive breakpoints (xs, sm, md, lg, xl)
• FlexBox-like behavior with rows and columns
• Automatic spacing and alignment
• Design-time preview of different breakpoints
• Runtime responsive behavior

CSS Classes

Container Classes

• container - Fixed-width responsive container
• container-fluid - Full-width container

Row Classes

• row - Creates a flex row
• no-gutters - Removes spacing between columns

Column Classes

• col - Auto-sized column
• col-{n} - Column width (1-12, e.g., col-6 = 50%)
• col-{breakpoint}-{n} - Responsive width (e.g., col-md-4)
• col-auto - Size to content

Spacing Classes

• m-{n} - Margin all sides (0-5)
• mt-{n}, mb-{n}, ml-{n}, mr-{n} - Margin sides
• mx-{n}, my-{n} - Margin horizontal/vertical
• p-{n} - Padding all sides
• pt-{n}, pb-{n}, pl-{n}, pr-{n} - Padding sides
• px-{n}, py-{n} - Padding horizontal/vertical

Sizing Classes

• w-{percent} - Width (25, 50, 75, 100)
• h-{percent} - Height (25, 50, 75, 100)
• min-w-{px} - Minimum width
• max-w-{px} - Maximum width

Alignment Classes

• justify-content-start, center, end, between
• align-items-start, center, end, stretch

Usage Examples

Basic Row/Column Layout

Layout1.FlexFMXCSS.CSSClasses := 'container';
  Layout2.FlexFMXCSS.CSSClasses := 'row';
    Layout3.FlexFMXCSS.CSSClasses := 'col-6';
    Layout4.FlexFMXCSS.CSSClasses := 'col-6';

Responsive Layout

// Stacks on mobile, 2 columns on tablet, 3 columns on desktop
Layout1.FlexFMXCSS.CSSClasses := 'col-12 col-md-6 col-lg-4';

Centered Content

Layout1.FlexFMXCSS.CSSClasses := 'row justify-content-center align-items-center';

Breakpoints

• xs - Extra small (<576px) - Mobile phones
• sm - Small (≥576px) - Landscape phones
• md - Medium (≥768px) - Tablets
• lg - Large (≥992px) - Desktops
• xl - Extra large (≥1200px) - Large desktops

Notes

• Use the DesignModeBreakpoint property to preview different screen sizes at design-time
• Layouts automatically adjust at runtime based on actual form size
• The 12-column grid provides flexibility for most layout needs
• Combine multiple classes (e.g., 'col-md-6 p-3 mb-2') for complex layouts