Flex Direction

Set the layout direction of a flex container — horizontal row or vertical column — using flex-row and flex-col.

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

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WFlexContainer(
  className: 'flex-row w-full h-40 bg-gray-100',
  children: [
    WCard(className: 'bg-blue-500 w-1/3 h-full', child: WText('Card 1')),
    WCard(className: 'bg-green-500 w-1/3 h-full', child: WText('Card 2')),
    WCard(className: 'bg-red-500 w-1/3 h-full', child: WText('Card 3')),
  ],
);

Basic Usage

Use flex-row to lay out children horizontally and flex-col to lay them out vertically.

// Vertical stack
WFlexContainer(
  className: 'flex-col bg-gray-100',
  children: [
    WCard(className: 'bg-blue-500 w-full h-16', child: WText('Top')),
    WCard(className: 'bg-green-500 w-full h-16', child: WText('Middle')),
    WCard(className: 'bg-red-500 w-full h-16', child: WText('Bottom')),
  ],
);

Quick Reference

Responsive Design

Switch direction at different breakpoints by prefixing the class.

WFlexContainer(
  className: 'flex-col md:flex-row bg-gray-100',
  children: [
    WCard(className: 'bg-blue-500 h-16', child: WText('A')),
    WCard(className: 'bg-green-500 h-16', child: WText('B')),
  ],
);

Related Documentation

• Justify Content — control main-axis alignment.
• Align Items — control cross-axis alignment.
• Axis Sizes — control how much space the container occupies along its main axis.
• WFlexContainer — the primary flex layout widget.
• WFlex — alternative flex container.