search ESC

Searching…

No results for "".

Type at least 2 characters to search.

Docs
You are viewing an older version (0.0.5). Go to the latest.

Justify Content

Control how children are distributed along the main axis of a flex container using the justify-* utilities.

Open Preview Source 

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WFlexContainer(
  className: 'flex-row justify-between bg-gray-200',
  children: [
    WCard(className: 'bg-blue-500 w-16 h-16', child: WText('Card 1')),
    WCard(className: 'bg-green-500 w-16 h-16', child: WText('Card 2')),
    WCard(className: 'bg-red-500 w-16 h-16', child: WText('Card 3')),
  ],
);

Basic Usage

The justify-* utilities map directly to Flutter's MainAxisAlignment values and control how children are spaced along the main axis of a flex container.

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

Quick Reference

Class MainAxisAlignment Description
justify-center MainAxisAlignment.center Center children along the main axis
justify-start MainAxisAlignment.start Align children to the start of the main axis
justify-end MainAxisAlignment.end Align children to the end of the main axis
justify-between MainAxisAlignment.spaceBetween Place equal space between children
justify-around MainAxisAlignment.spaceAround Place equal space around each child
justify-evenly MainAxisAlignment.spaceEvenly Distribute children with equal spacing including edges

Responsive Design

Prefix any justify-* class with a breakpoint to change alignment at specific screen sizes.

WFlexContainer(
  className: 'flex-row justify-start md:justify-between lg:justify-evenly bg-gray-100',
  children: [
    WCard(className: 'bg-blue-500 w-16 h-16', child: WText('A')),
    WCard(className: 'bg-green-500 w-16 h-16', child: WText('B')),
    WCard(className: 'bg-red-500 w-16 h-16', child: WText('C')),
  ],
);

  • Align Items — control alignment along the cross axis.
  • Flex Direction — control whether the main axis runs horizontally or vertically.
  • Gap — add fixed spacing between children.
  • WFlexContainer — the primary flex layout widget.
  • WFlex — alternative flex container.