Axis Sizes

Control how much space a flex container occupies along its main axis using axis-max and axis-min.

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

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

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.