Flex Fit

Control how a child widget sizes itself within a flex container using flex-grow and flex-auto.

• Basic Usage
• Quick Reference
• Responsive Design
• Related Documentation

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WFlexContainer(
  className: 'flex-row bg-gray-100',
  children: [
    WCard(
      className: 'flex-grow bg-blue-500',
      child: WText('Grow'),
    ),
    WCard(
      className: 'flex-auto bg-green-500',
      child: WText('Auto'),
    ),
  ],
);

Basic Usage

flex-grow expands the child to fill all remaining space in the flex container (FlexFit.tight). flex-auto lets the child take only the space it needs (FlexFit.loose).

WFlexContainer(
  className: 'flex-row bg-gray-100',
  children: [
    // Takes all remaining horizontal space
    WCard(
      className: 'flex-grow bg-blue-500',
      child: WText('Fills remaining space'),
    ),
    // Sized to its content
    WCard(
      className: 'flex-auto bg-green-500',
      child: WText('Content width'),
    ),
  ],
);

Quick Reference

Responsive Design

Combine flex-fit classes with breakpoint prefixes to change sizing behavior at different screen sizes.

WFlexContainer(
  className: 'flex-row bg-gray-100',
  children: [
    WCard(
      className: 'flex-auto md:flex-grow bg-blue-500',
      child: WText('Adapts'),
    ),
    WCard(
      className: 'flex-auto bg-green-500',
      child: WText('Always auto'),
    ),
  ],
);

Related Documentation

• Flex-x — set a numeric flex factor (flex-1, flex-2, etc.).
• Axis Sizes — control the container's main-axis size.
• WFlexible — the widget that wraps the Flutter Flexible primitive.
• WFlexContainer — the primary flex layout widget.