Flex Direction
Set the layout direction of a flex container — horizontal row or vertical column — using flex-row and flex-col.
On this page
flex/flex_direction
The live demo is not available for this example.
flex_direction.dart
View source
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#
| Class | Axis | Description |
|---|---|---|
flex-row |
Axis.horizontal |
Lay out children left-to-right |
flex-col |
Axis.vertical |
Lay out children top-to-bottom |
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.