Axis Sizes
Control how much space a flex container occupies along its main axis using axis-max and axis-min.
On this page
flex/axis_sizes
The live demo is not available for this example.
axis_sizes.dart
View source
import 'package:fluttersdk_wind/fluttersdk_wind.dart';
WFlexContainer(
className: 'axis-max flex-row bg-gray-400',
children: [
WCard(className: 'bg-blue-500 w-20 h-20', child: WText('Card 1')),
WCard(className: 'bg-green-500 w-20 h-20', child: WText('Card 2')),
],
);
Basic Usage#
axis-max makes the flex container stretch to fill all available space along the main axis. axis-min shrinks the container to fit its children exactly.
// Only occupies the space its children need
WFlexContainer(
className: 'axis-min flex-row bg-gray-400',
children: [
WCard(className: 'bg-blue-500 w-20 h-20', child: WText('Card 1')),
WCard(className: 'bg-green-500 w-20 h-20', child: WText('Card 2')),
],
);
Quick Reference#
| Class | MainAxisSize | Description |
|---|---|---|
axis-max |
MainAxisSize.max |
Container takes up all available space along the main axis |
axis-min |
MainAxisSize.min |
Container takes up only the space required by its children |
Responsive Design#
Prefix axis-size classes with a breakpoint to change behavior at specific screen widths.
WFlexContainer(
className: 'axis-min md:axis-max flex-row bg-gray-100',
children: [
WCard(className: 'bg-blue-500 w-20 h-20', child: WText('A')),
WCard(className: 'bg-green-500 w-20 h-20', child: WText('B')),
],
);
Related Documentation#
- Flex Direction — control whether the main axis runs horizontally or vertically.
- Flex Fit — control how individual children are sized within the flex container.
- WFlexContainer — the primary flex layout widget.