Align Items

Control how children are positioned along the cross axis of a flex container using the items-* utilities.

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

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

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.