Gap

Add consistent spacing between flex children using gap-N (scaled by the pixel factor) or gap-[N] (fixed pixels).

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

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WFlexContainer(
  className: 'flex-row gap-4 bg-gray-100',
  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

gap-N multiplies N by the current pixel factor (default 4) to produce the gap in logical pixels. For example, gap-4 produces 4 × 4 = 16 px at the default factor.

The gap is inserted between children along the flex direction — flex-row inserts horizontal gaps, flex-col inserts vertical gaps.

WFlexContainer(
  className: 'flex-col gap-2 bg-gray-100',
  children: [
    WCard(className: 'bg-blue-500 w-full h-16', child: WText('Row 1')),
    WCard(className: 'bg-green-500 w-full h-16', child: WText('Row 2')),
    WCard(className: 'bg-red-500 w-full h-16', child: WText('Row 3')),
  ],
);

Quick Reference

Any integer value is accepted. The actual pixel size is N × pixelFactor.

Arbitrary Values

Use gap-[N] to set a fixed pixel gap that is not scaled by the pixel factor.

WFlexContainer(
  className: 'gap-[8] flex-row 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')),
  ],
);

The value inside [...] is treated as a literal pixel count (8 → 8 px).

Responsive Design

Prefix gap-N or gap-[N] with a breakpoint to apply different spacing at specific screen sizes.

WFlexContainer(
  className: 'flex-row gap-2 md:gap-4 lg:gap-8 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')),
  ],
);

Related Documentation

• Flex Direction — determines the axis along which the gap is applied.
• Align Items — control cross-axis alignment.
• Justify Content — control main-axis spacing with alignment utilities.
• WFlexContainer — the primary flex layout widget.