WFlexContainer

The WFlexContainer widget in the Wind plugin is a utility-first flexible container. It enables developers to create responsive layouts with ease using predefined classes, similar to the HTML <div> with TailwindCSS utility classes.

Supported Utility Classes

Below are the utility classes supported by WFlexContainer, along with documentation links and examples.

Class Type	Example	Documentation
Responsive Design	sm:flex-col, xs:flex-row	Responsive Design
Flex Direction	flex-row, flex-col	Flex Direction
Justify Content	justify-center, justify-between	Justify Content
Align Items	items-start, items-center	Align Items
Axis Sizes	axis-max, axis-min	Axis Sizes
Gap (Spacing)	gap-2, gap-[4]	Gap (Spacing)
Flex-x	flex-1, flex-2 ...	Flex-x
Flex Fit Classes	flex-grow, flex-auto	Flex Fit Classes
Alignment	alignment-top-left, alignment-center-right	Alignment
Padding	p-4, px-[6], py-2	Padding
Margin	m-8, mx-[4], my-2	Margin
Width	w-10, w-[30]	Width
Height	h-10, h-[30]	Height
Max-Width & Min-Width	max-w-10, min-w-[50]	Max-Width & Min-Width
Max-Height & Min-Height	max-h-10, min-h-[50]	Max-Height & Min-Height
Background Color	bg-red-500, bg-[#1abc9c]	Background Color
Border Width	border-4, border-[6]	Border Width
Border Color	border-red-500, border-[#1abc9c]	Border Color
Border Radius	rounded-lg, rounded-full	Border Radius
Overflow	overflow-scroll	Overflow
Shadow	shadow-md, shadow-lg	Shadow

Example

WFlexContainer(
  className: 'flex-col items-center justify-center gap-4 bg-gray-200',
  children: [
    WContainer(
      className: 'w-16 h-16 bg-blue-500',
      child: WText('Child 1', className: 'text-white'),
    ),
    WContainer(
      className: 'w-16 h-16 bg-green-500',
      child: WText('Child 2', className: 'text-white'),
    ),
  ],
);

The above example HTML equivalent is:

<div class="flex flex-col items-center justify-center gap-4 bg-gray-200">
  <div class="w-16 h-16 bg-blue-500">Child 1</div>
  <div class="w-16 h-16 bg-green-500">Child 2</div>
</div>