Flex Fit
Control how a child widget sizes itself within a flex container using flex-grow and flex-auto.
On this page
flex/flex_fit
The live demo is not available for this example.
flex_fit.dart
View source
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#
| Class | FlexFit | Description |
|---|---|---|
flex-grow |
FlexFit.tight |
Child expands to fill all available space |
flex-auto |
FlexFit.loose |
Child takes only the space it requires |
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
Flexibleprimitive. - WFlexContainer — the primary flex layout widget.