Align Items
Control how children are positioned along the cross axis of a flex container using the items-* utilities.
On this page
flex/align_items
The live demo is not available for this example.
align_items.dart
View source
import 'package:fluttersdk_wind/fluttersdk_wind.dart';
WFlexContainer(
className: 'flex-row items-center bg-gray-100 h-64',
children: [
WCard(className: 'bg-blue-500 h-16', child: WText('Card 1')),
WCard(className: 'bg-green-500 h-16', child: WText('Card 2')),
WCard(className: 'bg-red-500 h-16', child: WText('Card 3')),
],
);
Basic Usage#
The items-* utilities map directly to Flutter's CrossAxisAlignment values and are applied to any WFlexContainer or WFlex.
WFlexContainer(
className: 'flex-row items-start bg-gray-100',
children: [
WCard(className: 'bg-blue-500 h-12', child: WText('Short')),
WCard(className: 'bg-green-500 h-24', child: WText('Tall')),
],
);
Quick Reference#
| Class | CrossAxisAlignment | Description |
|---|---|---|
items-start |
CrossAxisAlignment.start |
Align children at the start of the cross axis |
items-end |
CrossAxisAlignment.end |
Align children at the end of the cross axis |
items-center |
CrossAxisAlignment.center |
Center children along the cross axis |
items-baseline |
CrossAxisAlignment.baseline |
Align children to their text baseline |
items-stretch |
CrossAxisAlignment.stretch |
Stretch children to fill the cross axis |
Responsive Design#
Prefix any items-* class with a breakpoint to change alignment at specific screen sizes.
WFlexContainer(
className: 'flex-row items-start md:items-center lg:items-end',
children: [
WCard(className: 'bg-blue-500 h-16', child: WText('A')),
WCard(className: 'bg-green-500 h-24', child: WText('B')),
],
);
Related Documentation#
- Flex Direction — control whether children are laid out in a row or column.
- Justify Content — control alignment along the main axis.
- WFlexContainer — the primary flex layout widget.
- WFlex — alternative flex container accepting a
className.